TimePicker 时间选择器

用于选择或输入日期

固定时间点

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

TimePicker 时间选择器 - 图1

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

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

任意时间点

可以选择任意时间

TimePicker 时间选择器 - 图2

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

  1. <template>
  2. <el-time-picker
  3. v-model="value2"
  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="value3"
  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. value2: new Date(2016, 9, 10, 18, 40),
  23. value3: 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>

任意时间范围

可选择任意的时间范围

添加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>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
  25. value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
  26. };
  27. }
  28. }
  29. </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 获取焦点 -

原文: http://element-cn.eleme.io/#/zh-CN/component/time-picker