TimePicker 时间选择器

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

    基础用法

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

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

    TimePicker 时间选择器 - 图2

    时间格式

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

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

    1. <template>
    2.     <Row>
    3.             <TimePicker :value="value1" format="HH点mm分ss秒" placeholder="Select time" style="width: 168px"></TimePicker>
    4.         </Col>
    5.         <Col span="12">
    6.             <TimePicker :value="value2" format="HH’mm’ss" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
    7.         </Col>
    8.     </Row>
    9. </template>
    10. <script>
    11.         data () {
    12.             return {
    14.                 value2: ['09:41:00', '12:00:00']
    15.             }
    16.         }
    17.     }
    18. </script>

    选择时分

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

    时间间隔

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

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

    }
</script>

    TimePicker 时间选择器 - 图5

    不可选时间

    可以使用 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>
</template>
<script>
    export default {

    }
</script>

    TimePicker 时间选择器 - 图7

    手动控制组件

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

    尺寸

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

    <template>
    <row :gutter="16">
        <Col span="8">
            <TimePicker size="small" placeholder="Select time"></TimePicker>
        </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>