• TimePicker 时间选择框
    • 何时使用
    • 代码演示
      • 12 小时制
      • 附加内容
      • 基本
      • 禁用
      • 选择时分
      • 步长选项
      • 三种大小
      • 受控组件
      • 后缀图标
  • API
    • 事件
  • 方法

    TimePicker 时间选择框

    输入或选择时间的控件。

    何时使用

    当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。

    代码演示

    TimePicker 时间选择框 - 图1

    12 小时制

    12 小时制的时间选择器,默认的 format 为 h:mm:ss a

    1. <template>
    2. <div>
    3. <a-time-picker use12Hours @change="onChange" />
    4. <a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
    5. <a-time-picker use12Hours format="h:mm a" @change="onChange" />
    6. </div>
    7. </template>
    8. <script>
    9. export default {
    10. methods: {
    11. onChange(time, timeString) {
    12. console.log(time, timeString);
    13. },
    14. },
    15. };
    16. </script>

    TimePicker 时间选择框 - 图2

    附加内容

    在 TimePicker 选择框底部显示自定义的内容。

    1. <template>
    2. <div>
    3. <a-time-picker @openChange="handleOpenChange" :open="open">
    4. <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleClose"
    5. >Ok {{panel.prefixCls}}</a-button
    6. >
    7. </a-time-picker>
    8. <a-time-picker :open.sync="open2">
    9. <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
    10. </a-time-picker>
    11. </div>
    12. </template>
    13. <script>
    14. import moment from 'moment';
    15. export default {
    16. data() {
    17. return {
    18. open: false,
    19. open2: false,
    20. };
    21. },
    22. methods: {
    23. handleOpenChange(open) {
    24. console.log('open', open);
    25. this.open = open;
    26. },
    27. handleClose() {
    28. this.open = false;
    29. this.open2 = false;
    30. },
    31. },
    32. };
    33. </script>

    TimePicker 时间选择框 - 图3

    基本

    点击 TimePicker,然后可以在浮层中选择或者输入某一时间。

    1. <template>
    2. <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
    3. </template>
    4. <script>
    5. import moment from 'moment';
    6. export default {
    7. methods: {
    8. moment,
    9. onChange(time, timeString) {
    10. console.log(time, timeString);
    11. },
    12. },
    13. };
    14. </script>

    TimePicker 时间选择框 - 图4

    禁用

    禁用时间选择。

    1. <template>
    2. <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
    3. </template>
    4. <script>
    5. import moment from 'moment';
    6. export default {
    7. methods: {
    8. moment,
    9. },
    10. };
    11. </script>

    TimePicker 时间选择框 - 图5

    选择时分

    TimePicker 浮层中的列会随着 format 变化,当略去 format 中的某部分时,浮层中对应的列也会消失。

    1. <template>
    2. <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
    3. </template>
    4. <script>
    5. import moment from 'moment';
    6. export default {
    7. methods: {
    8. moment,
    9. },
    10. };
    11. </script>

    TimePicker 时间选择框 - 图6

    步长选项

    可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。

    1. <template>
    2. <a-time-picker :minuteStep="15" :secondStep="10" />
    3. </template>

    TimePicker 时间选择框 - 图7

    三种大小

    三种大小的输入框,大的用在表单中,中的为默认。

    1. <template>
    2. <div>
    3. <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
    4. <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
    5. <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
    6. </div>
    7. </template>
    8. <script>
    9. import moment from 'moment';
    10. export default {
    11. methods: {
    12. moment,
    13. },
    14. };
    15. </script>

    TimePicker 时间选择框 - 图8

    受控组件

    value 和 onChange 需要配合使用。也可以直接使用v-model。

    1. <template>
    2. <div>
    3. <p>use value and @change</p>
    4. <a-time-picker @change="onChange" :value="value" />
    5. <br />
    6. <br />
    7. <p>v-model</p>
    8. <a-time-picker v-model="value" />
    9. <br />
    10. <br />
    11. <p>Do not change</p>
    12. <a-time-picker :value="value2" />
    13. </div>
    14. </template>
    15. <script>
    16. import moment from 'moment';
    17. export default {
    18. data() {
    19. return {
    20. value: null,
    21. value2: moment(),
    22. };
    23. },
    24. methods: {
    25. onChange(time) {
    26. console.log(time);
    27. this.value = time;
    28. },
    29. },
    30. };
    31. </script>

    TimePicker 时间选择框 - 图9

    后缀图标

    点击 TimePicker,然后可以在浮层中选择或者输入某一时间。

    1. <template>
    2. <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
    3. <a-icon type="smile" slot="suffixIcon" />
    4. </a-time-picker>
    5. </template>
    6. <script>
    7. import moment from 'moment';
    8. export default {
    9. methods: {
    10. moment,
    11. onChange(time, timeString) {
    12. console.log(time, timeString);
    13. },
    14. },
    15. };
    16. </script>

    API

    参数说明类型默认值
    addon选择框底部显示自定义的内容slot | slot-scope
    allowClear是否展示清除按钮booleantrue
    autoFocus自动获取焦点booleanfalse
    clearText清除按钮的提示文案stringclear
    defaultOpenValue当 defaultValue/value 不存在时,可以设置面板打开时默认选中的值momentmoment()
    defaultValue默认时间moment
    disabled禁用全部操作booleanfalse
    disabledHours禁止选择部分小时选项function()
    disabledMinutes禁止选择部分分钟选项function(selectedHour)
    disabledSeconds禁止选择部分秒选项function(selectedHour, selectedMinute)
    format展示的时间格式string"HH:mm:ss"
    getPopupContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)
    hideDisabledOptions隐藏禁止选择的选项booleanfalse
    hourStep小时选项间隔number1
    inputReadOnly设置输入框为只读(避免在移动设备上打开虚拟键盘)booleanfalse
    minuteStep分钟选项间隔number1
    open(.sync)面板是否打开booleanfalse
    placeholder没有值的时候显示的内容string"请选择时间"
    popupClassName弹出层类名string''
    popupStyle弹出层样式对象object-
    secondStep秒选项间隔number1
    suffixIcon自定义的选择框后缀图标string | VNode | slot-
    use12Hours使用 12 小时制,为 true 时 format 默认为 h:mm:ss abooleanfalse
    value(v-model)当前时间moment

    事件

    事件名称说明回调参数
    change时间发生变化的回调function(time: moment, timeString: string): void
    openChange面板打开/关闭时的回调(open: boolean): void

    方法

    名称描述
    blur()移除焦点
    focus()获取焦点