Form-timepicker时间选择器

一、固定时间点

提供几个固定的时间点供用户选择 
使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长

el-time-select类似下拉框，选择有限

<el-time-select
  v-model="value1"
  :picker-options="{
  start: '08:30',
  step: '00:15',
  end: '18:30'
}"
  placeholder="选择时间">
</el-time-select>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        value1: ''
      };
    }
  })
</script>

二、任意时间点 

 el-time-picker可任意选择时间，通过selectableRange限制可选时间范围。

提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

<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>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        value2: new Date(2016, 9, 10, 18, 40),
        value3: new Date(2016, 9, 10, 18, 40)
      };
    }
  })
</script>

三、任意时间范围 
is-range：属性即可选择时间范围，同样支持arrow-control属性

 <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>

<script>
  new Vue({
    el: '#app',
    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

参数	说明	类型	可选值	默认值
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时开始日期的占位内容	string	—	—
is-range	是否为时间范围选择，仅对<el-time-picker>有效	boolean	—	false
arrow-control	是否使用箭头进行时间选择，仅对<el-time-picker>有效	boolean	—	false
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	-	'-'

¶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	—	—