TimePicker 时间选择器

用于选择或输入日期

固定时间点

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

  1. <el-time-select
  2.   v-model="value1"
  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.         value1: ''
  16.       };
  17.     }
  18.   }
  19. </script>

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变
固定时间范围.png

  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>

任意时间范围

可选择任意的时间范围

任意时间范围.png

添加is-range属性即可选择时间范围，同样支持arrow-control属性。

  1. <template>
  2.   <el-time-picker
  3.     is-range
  4.     v-model="value4"
  5.     range-separator="至"
  6.     start-placeholder="开始时间"
  7.     end-placeholder="结束时间"
  8.     placeholder="选择时间范围">
  9.   </el-time-picker>
  10.   <el-time-picker
  11.     is-range
  12.     arrow-control
  13.     v-model="value5"
  14.     range-separator="至"
  15.     start-placeholder="开始时间"
  16.     end-placeholder="结束时间"
  17.     placeholder="选择时间范围">
  18.   </el-time-picker>
  19. </template>
  21. <script>
  22.   export default {
  23.     data() {
  24.       return {
  25.         value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
  26.         value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
  27.       };
  28.     }
  29.   }
  30. </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 是否为时间范围选择，仅对有效 boolean — false
arrow-control 是否使用箭头进行时间选择，仅对有效 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时可用，绑定值的格式，同DatePicker string 小时 HH，分 mm，秒 ss，AM/PM A —
default-value 可选，选择器打开时默认显示的时间 Date(TimePicker) / string(TimeSelect) 可被new Date()解析(TimePicker) / 可选值(TimeSelect) —
name 原生属性 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 — —
format 时间格式化(TimePicker) string 小时：HH，分：mm，秒：ss，AM/PM A ‘HH:mm:ss’

Events

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

Methods

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