TimeSelect 时间选择

用于选择或输入日期

固定时间点

提供几个固定的时间点供用户选择

TimeSelect 时间选择器 - 图1

使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长

  1. <el-time-select
  2.   v-model="value"
  3.   :picker-options="{
  4.     start: '08:30',
  5.     step: '00:15',
  6.     end: '18:30'
  7.   }"
  8.   placeholder="选择时间">
  9. </el-time-select>
  11. <script>
  12.   export default {
  13.     data() {
  14.       return {
  15.         value: ''
  16.       };
  17.     }
  18.   }
  19. </script>

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

TimeSelect 时间选择器 - 图2

  1. <template>
  2.   <el-time-select
  3.     placeholder="起始时间"
  4.     v-model="startTime"
  5.     :picker-options="{
  6.       start: '08:30',
  7.       step: '00:15',
  8.       end: '18:30'
  9.     }">
  10.   </el-time-select>
  11.   <el-time-select
  12.     placeholder="结束时间"
  13.     v-model="endTime"
  14.     :picker-options="{
  15.       start: '08:30',
  16.       step: '00:15',
  17.       end: '18:30',
  18.       minTime: startTime
  19.     }">
  20.   </el-time-select>
  21. </template>
  23. <script>
  24.   export default {
  25.     data() {
  26.       return {
  27.         startTime: '',
  28.         endTime: ''
  29.       };
  30.     }
  31.   }
  32. </script>

Attributes

参数说明类型可选值默认值
value / v-model绑定值date(TimePicker) / string(TimeSelect)——
editable文本框可输入boolean—true
clearable是否显示清除按钮boolean—true
size输入框尺寸stringmedium / small / mini—
placeholder非范围选择时的占位内容string——
picker-options当前时间日期选择器特有的选项参考下表object—{}
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——

Events

事件名说明参数
change用户确认选定的值时触发组件绑定值
blur当 input 失去焦点时触发组件实例
focus当 input 获得焦点时触发组件实例

Methods

方法名说明参数
focus使 input 获取焦点-
blur去掉 input 获取焦点-