TimePicker 時間選擇器

用於選擇或輸入日期

固定時間點

提供幾個固定的時間點供用戶選擇

使用 el-time-select 標簽，分別通過star、end和step指定可選的起始時間、結束時間和步長

<el-time-select
  v-model="value1"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="選擇時間">
</el-time-select>

<script>
  export default {
    data() {
      return {
        value1: ''
      };
    }
  }
</script>

任意時間點

可以選擇任意時間

使用 el-time-picker 標簽，通過selectableRange限制可選時間范圍。提供了兩種交互方式：默認情況下通過鼠標滾輪進行選擇，打開arrow-control屬性則通過界面上的箭頭進行選擇。

<template>
  <el-time-picker
    v-model="value2"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意時間點">
  </el-time-picker>
  <el-time-picker
    arrow-control
    v-model="value3"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }"
    placeholder="任意時間點">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value2: new Date(2016, 9, 10, 18, 40),
        value3: new Date(2016, 9, 10, 18, 40)
      };
    }
  }
</script>

固定時間范圍

若先選擇開始時間，則結束時間內備選項的狀態會隨之改變

<template>
  <el-time-select
    placeholder="起始時間"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </el-time-select>
  <el-time-select
    placeholder="結束時間"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

任意時間范圍

可選擇任意的時間范圍

添加is-range屬性即可選擇時間范圍，同樣支持arrow-control屬性。

<template>
  <el-time-picker
    is-range
    v-model="value4"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結束時間"
    placeholder="選擇時間范圍">
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value5"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結束時間"
    placeholder="選擇時間范圍">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

 

Attributes

參數	說明	類型	可選值	默認值
readonly	完全只讀	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可輸入	boolean	—	true
clearable	是否顯示清除按鈕	boolean	—	true
size	輸入框尺寸	string	medium / small / mini	—
placeholder	非范圍選擇時的占位內容	string	—	—
start-placeholder	范圍選擇時開始日期的占位內容	string	—	—
end-placeholder	范圍選擇時開始日期的占位內容	string	—	—
is-range	是否為時間范圍選擇，僅對<el-time-picker>有效	boolean	—	false
arrow-control	是否使用箭頭進行時間選擇，僅對<el-time-picker>有效	boolean	—	false
value	綁定值	date(TimePicker) / string(TimeSelect)	—	—
align	對齊方式	string	left / center / right	left
popper-class	TimePicker 下拉框的類名	string	—	—
picker-options	當前時間日期選擇器特有的選項參考下表	object	—	{}
range-separator	選擇范圍時的分隔符	string	-	'-'
value-format	可選，僅TimePicker時可用，綁定值的格式。不指定則綁定值為 Date 對象	string	見日期格式	—
default-value	可選，選擇器打開時默認顯示的時間	Date(TimePicker) / string(TimeSelect)	可被new Date()解析(TimePicker) / 可選值(TimeSelect)	—
name	原生屬性	string	—	—
prefix-icon	自定義頭部圖標的類名	string	—	el-icon-time
clear-icon	自定義清空圖標的類名	string	—	el-icon-circle-close

¶Time Select Options

參數	說明	類型	可選值	默認值
start	開始時間	string	—	09:00
end	結束時間	string	—	18:00
step	間隔時間	string	—	00:30
minTime	最小時間，小於該時間的時間段將被禁用	string	—	00:00
maxTime	最大時間，大於該時間的時間段將被禁用	string	—	—

¶Time Picker Options

參數	說明	類型	可選值	默認值
selectableRange	可選時間段，例如'18:30:00 - 20:30:00'或者傳入數組['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']	string / array	—	—
format	時間格式化(TimePicker)	string	小時：HH，分：mm，秒：ss，AM/PM A	'HH:mm:ss'

¶Events

事件名	說明	參數
change	用戶確認選定的值時觸發	組件綁定值
blur	當 input 失去焦點時觸發	組件實例
focus	當 input 獲得焦點時觸發	組件實例

¶Methods

方法名	說明	參數
focus	使 input 獲取焦點	-