TimePicker 时间选择器

选择或输入标准时间，支持选择范围。

基础用法

设置属性为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。

设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。

时间格式

设置属性 format 可以改变时间的显示格式，详见 )。

注意，format 只是改变显示的格式，并非改变 value 值。

<template>
    <Row>
        <Col span="12">
            <TimePicker :value="value1" format="HH点mm分ss秒" placeholder="Select time" style="width: 168px"></TimePicker>
        </Col>
        <Col span="12">
            <TimePicker :value="value2" format="HH’mm’ss" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                value1: '09:41:00',
            }
        }
    }
</script>

选择时分

组件浮层中的列会随着 format 变化，当略去 format 中的秒时，浮层中对应的列也会消失。

时间间隔

通过属性 steps 可以设置时间间隔。数组的三项分别对应小时、分钟、秒。

<template>
    <TimePicker :steps="[1, 15, 15]" placeholder="Select time" style="width: 112px"></TimePicker>
</template>
<script>
    }
</script>

不可选时间

可以使用 disabled-hours disabled-minutes disabled-seconds 组合禁止用户选择某个时间。

使用 hide-disabled-options 可以直接把不可选择的项隐藏。

带有确认操作

设置属性 confirm，选择器会有清空和确定按钮。

<template>
    <Row>
        <Col span="12">
            <TimePicker confirm placeholder="Select time" style="width: 168px"></TimePicker>
        </Col>
        <Col span="12">
            <TimePicker confirm type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
        </Col>
    </Row>
<script>
    export default {
    }
</script>

手动控制组件

对于一些定制化的场景，可以使用 slot 配合参数 open confirm 及事件来手动控制组件的显示状态，详见示例和 API。

尺寸

通过设置属性 size 为 large 或 small 可以调整选择器尺寸为大或小，默认不填为中。

<template>
    <row :gutter="16">
        <Col span="8">
        </Col>
        <Col span="8">
            <TimePicker placeholder="Select time"></TimePicker>
        </Col>
        <Col span="8">
            <TimePicker size="large" placeholder="Select time"></TimePicker>
        </Col>
    </Row>
</template>
<script>
    export default {
</script>