TimePicker 时间选择框

输入或选择时间的控件。

何时使用

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

代码演示

TimePicker时间选择框 - 图1

12 小时制

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

  1. <template>
  2. <div>
  3. <a-time-picker use12-hours @change="onChange" />
  4. <a-time-picker use12-hours format="h:mm:ss A" @change="onChange" />
  5. <a-time-picker use12-hours 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. <a-time-picker :default-open-value="moment('00:00:00', 'HH:mm:ss')" @change="onChange" />
  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时间选择框 - 图3**TimePicker时间选择框 - 图4

选择时分

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

  1. <template>
  2. <a-time-picker :default-value="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时间选择框 - 图5

三种大小

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

  1. <template>
  2. <div>
  3. <a-time-picker :default-value="moment('12:08:23', 'HH:mm:ss')" size="large" />
  4. <a-time-picker :default-value="moment('12:08:23', 'HH:mm:ss')" />
  5. <a-time-picker :default-value="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时间选择框 - 图6

后缀图标

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

  1. <template>
  2. <a-time-picker :default-open-value="moment('00:00:00', 'HH:mm:ss')" @change="onChange">
  3. <a-icon slot="suffixIcon" type="smile" />
  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>

TimePicker时间选择框 - 图7

附加内容

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

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

TimePicker时间选择框 - 图8

禁用

禁用时间选择。

  1. <template>
  2. <a-time-picker :default-value="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时间选择框 - 图9

步长选项

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

  1. <template>
  2. <a-time-picker :minute-step="15" :second-step="10" />
  3. </template>

TimePicker时间选择框 - 图10

受控组件

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

  1. <template>
  2. <div>
  3. <p>use value and @change</p>
  4. <a-time-picker :value="value" @change="onChange" />
  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>

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-
clearIcon自定义的清除图标string | VNode | slot-1.5.0
use12Hours使用 12 小时制,为 true 时 format 默认为 h:mm:ss abooleanfalse
value(v-model)当前时间moment
align该值将合并到 placement 的配置中,设置参考 dom-alignObject1.5.4
valueFormat可选,绑定值的格式,对 value、defaultValue 起作用。不指定则绑定值为 moment 对象string,具体格式-1.5.4

事件

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

方法

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