时间选择器 TimePicker

基本用法

时间输入器的基础用法。

自定义触发元素

使用 #trigger 插槽替换默认时间输入框，例如改为点击按钮打开时间面板。插槽直接提供 value、原生 date、displayValue、正在编辑的 inputValue、popupVisible、 disabled、readonly 和 range。

双向绑定

支持 v-model 进行数据的双向绑定。

默认值

只有默认值的情况，可通过 defaultValue 传递。

跳过确认

跳过确认步骤，直接点击选择时间。

禁用部分时间选项

通过设置 disabledHours disabledMinutes disabledSeconds，可以禁用 时 / 分 / 秒的部分选项。

禁用

禁用状态。

附加内容

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

定制格式

通过设置 format，可以定制需要显示的时、分、秒。

前缀

通过 prefix 插槽可以设置输入框前缀

范围选择器

时间输入器的范围选择器。

尺寸

有四种尺寸可供选择。

定制步长

通过设置 step，可以定制需要显示的时、分、秒的步长。

十二小时制

通过设置 use12Hours，可以定制需要显示的时、分、秒。

API

<time-picker> Props

参数名	描述	类型	默认值
type	选择器类型	'time' | 'time-range'	'time'
model-value (v-model)	绑定值	string | number | Date | Array<string | number | Date>	-
default-value	默认值	string | number | Date | Array<string | number | Date>	-
disabled	是否禁用	boolean	false
allow-clear	是否允许清除	boolean	true
readonly	是否为只读模式	boolean	false
error	是否为错误状态	boolean	false
format	展示日期的格式，参考字符串解析格式	string	'HH:mm:ss'
placeholder	提示文案	string | string[]	-
fit-width	宽度是否适应文字内容	boolean	false
max-w-full	最大宽度是否限制为父容器宽度	boolean	true
size	输入框尺寸	'mini' | 'small' | 'medium' | 'large'	'medium'
popup-container	弹出框的挂载容器	string | HTMLElement	-
use12-hours	12 小时制	boolean	false
step	设置 时 / 分 / 秒 的选择间隔	{ hour?: number; minute?: number; second?: number;}	-
disabled-hours	禁用的部分小时选项	() => number[]	-
disabled-minutes	禁用的部分分钟选项	(selectedHour?: number) => number[]	-
disabled-seconds	禁用的部分秒数选项	(selectedHour?: number, selectedMinute?: number) => number[]	-
hide-disabled-options	隐藏禁止选择的选项	boolean	false
disable-confirm	禁用确认步骤，开启后直接点选时间不需要点击确认按钮	boolean	false
position	弹出的位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br'	'bl'
popup-visible (v-model)	控制弹出框打开或者关闭	boolean	-
default-popup-visible	弹出框默认打开或者关闭	boolean	false
trigger-props	可以传入 Trigger 组件的参数	TriggerProps	-
unmount-on-close	是否在关闭后销毁 dom 结构	boolean	false

<time-picker> Events

事件名	描述	参数
change	组件值发生改变	timeString: string | Array<string | undefined> | undefined time: date | Array<date | undefined> | undefined
select	选择时间但未触发组件值变化	timeString: string | Array<string | undefined> time: Date | Array<Date | undefined>
clear	点击清除按钮	-
popup-visible-change	弹出框展开和收起	visible: boolean

<time-picker> Slots

插槽名	描述	参数	版本
trigger	自定义触发元素	TimePickerTriggerSlotProps
prefix	输入框前缀	-	2.41.0
suffix-icon	输入框后缀图标	-
extra	额外的页脚	-

字符串解析格式

格式	输出	描述
YY	21	两位数的年份
YYYY	2021	四位数年份
M	1-12	月份，从 1 开始
MM	01-12	月份，两位数
MMM	Jan-Dec	缩写的月份名称
MMMM	January-December	完整的月份名称
D	1-31	月份里的一天
DD	01-31	月份里的一天，两位数
d	0-6	一周中的一天，星期天是 0
dd	Su-Sa	最简写的一周中一天的名称
ddd	Sun-Sat	简写的一周中一天的名称
dddd	Sunday-Saturday	一周中一天的名称
H	0-23	小时
HH	00-23	小时，两位数
h	1-12	小时, 12 小时制
hh	01-12	小时, 12 小时制, 两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数
S	0-9	数百毫秒，一位数
SS	00-99	几十毫秒，两位数
SSS	000-999	毫秒，三位数字
Z	-5:00	UTC 的偏移量
ZZ	-0500	UTC 的偏移量，数字前面加上 0
A	AM PM	-
a	am pm	-
Do	1st… 3st	带序号的月份中的某天
X	1410715640.579	Unix 时间戳
x	1410715640579	Unix 毫秒时间戳