TimePicker 时间选择器

用于选择或输入日期

固定时间点

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

TimePicker 时间选择器 - 图1

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

  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>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. value: ''
  15. };
  16. }
  17. }
  18. </script>

显示代码

任意时间点

可以选择任意时间

TimePicker 时间选择器 - 图2

使用 el-time-picker 标签,通过selectableRange限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。

  1. <template>
  2. <el-time-picker
  3. v-model="value1"
  4. :picker-options="{
  5. selectableRange: '18:30:00 - 20:30:00'
  6. }"
  7. placeholder="任意时间点">
  8. </el-time-picker>
  9. <el-time-picker
  10. arrow-control
  11. v-model="value2"
  12. :picker-options="{
  13. selectableRange: '18:30:00 - 20:30:00'
  14. }"
  15. placeholder="任意时间点">
  16. </el-time-picker>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. value1: new Date(2016, 9, 10, 18, 40),
  23. value2: new Date(2016, 9, 10, 18, 40)
  24. };
  25. }
  26. }
  27. </script>

显示代码

固定时间范围

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

TimePicker 时间选择器 - 图3

  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>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. startTime: '',
  27. endTime: ''
  28. };
  29. }
  30. }
  31. </script>

显示代码

任意时间范围

可选择任意的时间范围

TimePicker 时间选择器 - 图4

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

  1. <template>
  2. <el-time-picker
  3. is-range
  4. v-model="value1"
  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="value2"
  14. range-separator="至"
  15. start-placeholder="开始时间"
  16. end-placeholder="结束时间"
  17. placeholder="选择时间范围">
  18. </el-time-picker>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
  25. value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
  26. };
  27. }
  28. }
  29. </script>

显示代码

Attributes

参数说明类型可选值默认值
value / v-model绑定值date(TimePicker) / string(TimeSelect)
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringmedium / small / mini
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时开始日期的占位内容string
is-range是否为时间范围选择,仅对<el-time-picker>有效booleanfalse
arrow-control是否使用箭头进行时间选择,仅对<el-time-picker>有效booleanfalse
align对齐方式stringleft / center / rightleft
popper-classTimePicker 下拉框的类名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自定义头部图标的类名stringel-icon-time
clear-icon自定义清空图标的类名stringel-icon-circle-close

Time Select Options

参数说明类型可选值默认值
start开始时间string09:00
end结束时间string18:00
step间隔时间string00:30
minTime最小时间,小于该时间的时间段将被禁用string00: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 获取焦点-