TimePicker 时间选择框

输入或选择时间的控件。

代码演示

基础用法

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

<template>
  <a-space direction="vertical">
    <a-time-picker v-model:value="value" />
    <a-time-picker v-model:value="strValue" value-format="HH:mm:ss" />
  </a-space>
</template>
<script setup>
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
const value = ref(dayjs('08:00:00', 'HH:mm:ss'));
const strValue = ref('09:00:00');
watch(value, () => {
  console.log(value.value);
});
watch(strValue, () => {
  console.log(strValue.value);
});
</script>

无边框

无边框样式。

<template>
  <a-space direction="vertical">
    <a-time-picker :bordered="false" />
    <a-time-range-picker :bordered="false" />
  </a-space>
</template>

范围选择器

通过 TimeRangePicker 使用时间范围选择器。

<template>
  <a-time-range-picker />
</template>

12 小时制

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

<template>
  <a-space direction="vertical">
    <a-time-picker v-model:value="value" use12-hours />
    <a-time-picker v-model:value="value" use12-hours format="h:mm:ss A" style="width: 140px" />
    <a-time-picker v-model:value="value" use12-hours format="h:mm a" />
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value = ref();
</script>

附加内容

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

<template>
  <a-space direction="vertical">
    <a-time-picker v-model:value="value" v-model:open="open" @openChange="handleOpenChange">
      <template #renderExtraFooter="{ prefixCls }">
        <a-button size="small" type="primary" @click="handleClose">OK {{ prefixCls }}</a-button>
      </template>
    </a-time-picker>
    <a-time-picker v-model:value="value" v-model:open="open2">
      <template #renderExtraFooter>
        <a-button size="small" type="primary" @click="handleClose">OK</a-button>
      </template>
    </a-time-picker>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(false);
const open2 = ref(false);
const value = ref();
const handleOpenChange = openStatus => {
  console.log('open', openStatus);
  open.value = openStatus;
};
const handleClose = () => {
  open.value = false;
  open2.value = false;
};
</script>

禁用

禁用时间选择。

<template>
  <a-time-picker :value="dayjs('12:08:23', 'HH:mm:ss')" disabled />
</template>
<script setup>
export {};
</script>

自定义状态

使用 status 为 DatePicker 添加状态，可选 error 或者 warning。

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-time-picker status="error" />
    <a-time-picker status="warning" />
    <a-time-range-picker status="error" />
    <a-time-range-picker status="warning" />
  </a-space>
</template>

弹出位置

可以通过 placement 手动指定弹出的位置。

topLefttopRightbottomLeftbottomRight

<template>
  <a-radio-group v-model:value="placement">
    <a-radio-button value="topLeft">topLeft</a-radio-button>
    <a-radio-button value="topRight">topRight</a-radio-button>
    <a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
    <a-radio-button value="bottomRight">bottomRight</a-radio-button>
  </a-radio-group>
  <br />
  <br />
  <a-space direction="vertical" :size="12">
    <a-time-picker v-model:value="value1" :placement="placement" />
    <a-time-range-picker v-model:value="value2" :placement="placement" />
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const placement = ref('topLeft');
const value1 = ref();
const value2 = ref();
</script>

API

参数	说明	类型	默认值
allowClear	是否展示清除按钮	boolean	true
autofocus	自动获取焦点	boolean	false
bordered	是否有边框	boolean	true
clearIcon	自定义的清除图标	v-slot:clearIcon	-
clearText	清除按钮的提示文案	string	clear
disabled	禁用全部操作	boolean	false
disabledTime	不可选择的时间	DisabledTime	-
format	展示的时间格式	string	HH:mm:ss
getPopupContainer	定义浮层的容器，默认为 body 上新建 div	function(trigger)	-
hideDisabledOptions	隐藏禁止选择的选项	boolean	false
hourStep	小时选项间隔	number	1
inputReadOnly	设置输入框为只读（避免在移动设备上打开虚拟键盘）	boolean	false
minuteStep	分钟选项间隔	number	1
open(v-model)	面板是否打开	boolean	false
placeholder	没有值的时候显示的内容	string | [string, string]	请选择时间
placement	选择框弹出的位置	bottomLeft bottomRight topLeft topRight	bottomLeft
popupClassName	弹出层类名	string	-
popupStyle	弹出层样式对象	object	-
renderExtraFooter	选择框底部显示自定义的内容	v-slot:renderExtraFooter	-
secondStep	秒选项间隔	number	1
showNow	面板是否显示“此刻”按钮	boolean	-
status	设置校验状态	'error' | 'warning'	-
suffixIcon	自定义的选择框后缀图标	v-slot:suffixIcon	-
use12Hours	使用 12 小时制，为 true 时 format 默认为 h:mm:ss a	boolean	false
value(v-model)	当前时间	dayjs	-
valueFormat	可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象	string	-

DisabledTime

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

事件

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

方法

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

TimeRangePicker

属性与 DatePicker 的 RangePicker 相同。还包含以下属性：

参数	说明	类型	默认值
order	始末时间是否自动排序	boolean	true
disabledTime	不可选择的时间	RangeDisabledTime	-

RangeDisabledTime

type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};