• TimePicker 时间选择器
    • 固定时间点
    • 任意时间点
    • 固定时间范围
    • 任意时间范围
    • Attributes
    • Time Select Options
    • Time Picker Options
    • Events
    • Methods

    TimePicker 时间选择器

    用于选择或输入日期

    固定时间点

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

    TimePicker 时间选择器 - 图1

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

    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 获取焦点-