TimePicker 时间选择器

滚动列选时间，支持 12/24 小时制、步长、禁用项、范围选取。

基础用法

请选择时间

基础时间选择器，点击确定后提交

vue

<template>
  <ATimePicker />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

可清空

请选择时间

hover 时显示清空按钮

vue

<template>
  <ATimePicker :clearable="true" />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

12 小时制

请选择时间

use12Hours 开启 AM/PM 模式

vue

<template>
  <ATimePicker format="hh:mm:ss a" :use12-hours="true" />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

尺寸

请选择时间

请选择时间

请选择时间

sm / md / lg 三种尺寸

vue

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <ATimePicker size="sm" />
    <ATimePicker size="md" />
    <ATimePicker size="lg" />
  </div>
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

范围选择

开始时间—结束时间

isRange 开启范围选取，分别选开始/结束时间

vue

<template>
  <ATimePicker :is-range="true" />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

步长

请选择时间

通过 hourStep / minuteStep / secondStep 控制列间距

vue

<template>
  <ATimePicker :hour-step="2" :minute-step="15" :second-step="30" />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

禁用

08:00:00

disabled 禁用整个选择器

vue

<template>
  <ATimePicker :disabled="true" model-value="08:00:00" />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

禁用部分时间

禁用部分时间

通过 disabledHours / disabledMinutes / disabledSeconds 禁用特定时间

vue

<template>
  <ATimePicker
    :disabled-hours="() => [0, 1, 2, 3, 4, 5, 6, 22, 23]"
    :disabled-minutes="(h) => (h === 12 ? [0, 15, 30, 45] : [])"
    placeholder="禁用部分时间"
  />
</template>

<script setup lang="ts">
import { ATimePicker } from '@lite-code/aui-vue'
</script>

自定义格式

HH:mm:ss

HH:mm

mm:ss

通过 format 控制显示格式，支持只显示时分或分秒

vue

<template>
  <ASpace :gap="12">
    <ATimePicker format="HH:mm:ss" placeholder="HH:mm:ss" />
    <ATimePicker format="HH:mm" placeholder="HH:mm" />
    <ATimePicker format="mm:ss" placeholder="mm:ss" />
  </ASpace>
</template>

<script setup lang="ts">
import { ATimePicker, ASpace } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	Date | string | null | [...]	—	绑定值，range 模式为二元组
format	string	'HH:mm:ss'	时间格式
use12Hours	boolean	false	12 小时制
hourStep	number	1	小时步长
minuteStep	number	1	分钟步长
secondStep	number	1	秒步长
disabledHours	() => number[]	—	禁用小时列表
disabledMinutes	(hour: number) => number[]	—	禁用分钟列表
disabledSeconds	(hour: number, minute: number) => number[]	—	禁用秒列表
clearable	boolean	false	显示清空按钮
disabled	boolean	false	禁用
size	'sm' | 'md' | 'lg'	'md'	尺寸
placeholder	string	'请选择时间'	占位文本
rangePlaceholder	[string, string]	—	range 模式占位文本
isRange	boolean	false	是否开启范围选取

Events

事件名	回调参数	说明
update:modelValue	(value: Date | null | [Date | null, Date | null])	值变化
change	(value, str) — str 为格式化字符串	确认变化

format 占位符

占位符	含义
HH	24 小时制两位时（00–23）
H	24 小时制时（0–23）
hh	12 小时制两位时（01–12）
h	12 小时制时（1–12）
mm	两位分（00–59）
ss	两位秒（00–59）
A	大写 AM/PM
a	小写 am/pm