TimePicker 时间选择器

点击输入框弹出时间面板进行选择，基于 dayjs。

何时使用

需要选择时间（时/分/秒）时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import { TimePicker, dayjs } from "@reglow/reui";
import type { Dayjs } from "dayjs";

const value = ref<Dayjs | null>(null);

const onChange = (time: Dayjs | null, timeString: string) => {
  console.log(time, timeString);
};
</script>

<template>
  <TimePicker
    v-model="value"
    :default-open-value="dayjs('00:00:00', 'HH:mm:ss')"
    @change="onChange"
    class="w-[200px]"
  />
</template>

选中：12:08:23

导入

import { TimePicker, dayjs } from "@reglow/reui";
import type { Dayjs } from "dayjs";

更多示例

受控组件

value 和 onChange 需要配合使用。

<script setup lang="ts">
import { ref } from "vue";
import { TimePicker } from "@reglow/reui";
import type { Dayjs } from "dayjs";

const value = ref<Dayjs | null>(null);
</script>

<template>
  <TimePicker v-model="value" class="w-[200px]" />
</template>

三种大小

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

<script setup lang="ts">
import { TimePicker, dayjs } from "@reglow/reui";

const val = dayjs("12:08:23", "HH:mm:ss");
</script>

<template>
  <div class="flex gap-2">
    <TimePicker :default-value="val" size="large" class="w-[200px]" />
    <TimePicker :default-value="val" class="w-[200px]" />
    <TimePicker :default-value="val" size="small" class="w-[200px]" />
  </div>
</template>

选择确认

通过 needConfirm 手动设置是否需要确认按钮。确认模式下需要点击确认按钮才会提交。

<script setup lang="ts">
import { TimePicker } from "@reglow/reui";
import type { Dayjs } from "dayjs";

const onChange = (time: Dayjs | null, timeString: string) => {
  console.log(time, timeString);
};
</script>

<template>
  <TimePicker need-confirm @change="onChange" class="w-[200px]" />
</template>

禁用

<script setup lang="ts">
import { TimePicker, dayjs } from "@reglow/reui";

const val = dayjs("12:08:23", "HH:mm:ss");
</script>

<template>
  <TimePicker :default-value="val" disabled class="w-[200px]" />
</template>

选择时分

通过 format 控制显示哪些列。

<script setup lang="ts">
import { TimePicker, dayjs } from "@reglow/reui";

const format = "HH:mm";
const val = dayjs("12:08", format);
</script>

<template>
  <TimePicker :default-value="val" :format="format" class="w-[200px]" />
</template>

步长选项

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

<template>
  <TimePicker :hour-step="1" :minute-step="15" :second-step="10" class="w-[200px]" />
</template>

12 小时制

12 小时制的时间选择器。

<template>
  <div class="flex gap-2">
    <TimePicker use-12-hours class="w-[200px]" />
    <TimePicker use-12-hours format="h:mm:ss A" class="w-[200px]" />
    <TimePicker use-12-hours format="h:mm a" class="w-[200px]" />
  </div>
</template>

此刻按钮

<template>
  <TimePicker show-now class="w-[200px]" />
</template>

禁用时间

通过 disabledTime 禁用部分时间。

<script setup lang="ts">
import { TimePicker } from "@reglow/reui";
import type { Dayjs } from "dayjs";

const disabledTime = (now: Dayjs) => ({
  disabledHours: () => [0, 1, 2, 3, 4],
  disabledMinutes: () => [30, 31, 32, 33, 34, 35],
  disabledSeconds: () => [55, 56, 57, 58, 59],
});
</script>

<template>
  <TimePicker :disabled-time="disabledTime" class="w-[200px]" />
</template>

隐藏禁用选项

<template>
  <TimePicker :disabled-time="disabledTime" hide-disabled-options class="w-[200px]" />
</template>

附加内容

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

<template>
  <TimePicker class="w-[200px]">
    <template #renderExtraFooter>
      <Button size="small">OK</Button>
    </template>
  </TimePicker>
</template>

可清除

<script setup lang="ts">
import { TimePicker, dayjs } from "@reglow/reui";

const val = dayjs();
</script>

<template>
  <TimePicker allow-clear :default-value="val" class="w-[200px]" />
</template>

API

Props

属性	类型	默认值	说明
`modelValue`	`Dayjs \| null`	`null`	当前值（v-model）
`defaultValue`	`Dayjs \| null`	`null`	默认时间
`placeholder`	`string`	`请选择时间`	占位文字
`disabled`	`boolean`	`false`	是否禁用
`allowClear`	`boolean`	`true`	是否支持清除
`size`	`small \| medium \| large`	`medium`	输入框大小
`format`	`string`	`HH:mm:ss`	时间格式
`use12Hours`	`boolean`	`false`	12 小时制
`hourStep`	`number`	`1`	小时间隔
`minuteStep`	`number`	`1`	分钟间隔
`secondStep`	`number`	`1`	秒间隔
`needConfirm`	`boolean`	`false`	需要确认按钮
`hideDisabledOptions`	`boolean`	`false`	隐藏禁用选项
`showNow`	`boolean`	`false`	显示「此刻」按钮
`disabledTime`	`DisabledTimeFn`	-	禁用时间
`defaultOpenValue`	`Dayjs`	-	默认打开时间
`side`	`top \| bottom`	`bottom`	弹出位置
`sideOffset`	`number`	`4`	偏移量

Events

事件	说明	回调参数
`change`	时间变化回调	`(value: Dayjs \| null, timeString: string)`
`openChange`	面板打开/关闭	`(open: boolean)`

Slots

名称	说明
`renderExtraFooter`	面板底部附加内容

类型

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

默认格式

模式	format
24 小时制	`HH:mm:ss`
12 小时制	`h:mm:ss a`
仅时分	`HH:mm`

列显示规则

列根据 format 自动显示：

包含 H 或 h -> 显示小时列
包含 m -> 显示分钟列
包含 s -> 显示秒列
use12Hours 为 true -> 显示 AM/PM 列

国际化

placeholder、「此刻」按钮文案默认跟随全局语言（zh-CN / zh-TW / en-US），传 prop 可覆盖。

Textarea 文本域

Transfer 穿梭框

双栏多选选择器，直观展示已选与未选，支持搜索、分组、拖拽。