TimePicker 时间选择器

TimePicker 把 Rue 当前输入基座组织成可输入、可弹层选择、可范围组合的时间录入组件。视觉仍然使用 Rue 的输入气质，但能力面扩展到步进、12 小时制、禁用时间、确认式提交与 RangePicker。

12h / 24hStepDisabled TimeNeed ConfirmRangePicker

何时使用

需要选择或录入一天内的具体时间，但不需要日历日期维度。
希望把班次、预约、发布窗口这类规则直接体现在可选时间列里。
需要在单值选择之外，再补一个轻量的时间范围录入能力。

# 基础受控值

单值场景默认就是一个可输入的时间字段，点击后再展开 Rue 风格时间面板。

Live value

09:30:15

可直接手写时间，输入 HH:mm:ss 后按 Enter 或失焦提交

输入

input 可直接手写 HH:mm:ss

校验

失焦或回车时校验并同步受控值

清空

allowClear 提交空值并重置展示

# 尺寸、状态与变体

使用 Rue Input 的 size、status、variant 语义，不需要再记一套单独的外观 API。

# 格式、12 小时制与步进

通过 format 控制列数和展示文本，再用 step 把候选值压缩到排班、直播、预约等业务常用节奏。

24 小时制节奏块

当前节奏：13:30

12 小时制 lounge 模式

当前选择：8:15 pm

# 确认式选择与页脚说明

把草稿态和提交态拆开，适合需要二次确认的切档、发布、切流窗口。

提交值：11:00:00

Preview State

预览：11:00:00

面板变化先走 onCalendarChange，真正提交再触发 onChange，适合联动提示与确认按钮并存的流程。

# 禁用时间与隐藏无效项

把不可选时间直接内联进列逻辑里，避免用户先选中、后报错。

审核时段：09:20:00

仅开放 08:00 - 19:29 的有效窗口

08 点整点只允许 15 分钟节拍之外的值

09 点时自动禁用 55-59 秒的尾部时间

# RangePicker

RangePicker 直接复用单值能力，并在输出时自动整理先后顺序。

至

Start

09:00:00

End

18:30:00

# 手输、清空与附加块

TimePicker 不是只能点面板；保持直接输入的效率，同时把附加时区、说明和清空动作整合进来。

UTC+8

Manual Input Hint

当前格式下可以直接键入 21:45:00；如果切到h:mm a，则输入会改成 8:45 pm 这类字符串。

21:15:00

API

Rue 的 TimePicker 把输入和弹层合在同一个语义面里，因此既保持了手输效率，也补上了接近完整的核心能力层。

TimePicker

属性	说明	类型	默认值
`value / defaultValue`	当前时间与非受控初始值，使用格式化字符串承载。	`string \| null`	`-`
`format`	时间展示格式；默认 24 小时制为 HH:mm:ss，12 小时制为 h:mm:ss a。	`string`	`'HH:mm:ss'`
`use12Hours`	切换 12 小时制，并自动补出 meridiem 列。	`boolean`	`false`
`hourStep / minuteStep / secondStep`	控制列步长，适合排班、预约和节奏化录入。	`number`	`1`
`disabledTime`	按小时、分钟、秒粒度禁用时间。	`(selection) => { disabledHours?; disabledMinutes?; disabledSeconds? }`	`-`
`hideDisabledOptions`	把不可用项直接从列里隐藏，适合强约束流程。	`boolean`	`false`
`needConfirm`	启用确认按钮，面板内先调整草稿值，再显式提交。	`boolean`	`false`
`renderExtraFooter`	面板底部扩展内容，用于说明、快捷入口或状态提示。	`() => any`	`-`
`allowClear`	展示清空按钮，也支持传入自定义 clearIcon。	`boolean \| { clearIcon?: any }`	`false`
`status / variant / size`	复用 Rue 输入体系的语义状态、变体和尺寸。	`'warning' \| 'error' / 'outlined' \| 'filled' \| 'ghost' \| 'borderless' / TimePickerSize`	`'outlined' / -`
`onCalendarChange`	面板内草稿值变化时触发，适合预览与联动。	`(value, timeString, info) => void`	`-`
`onChange`	提交后的值变化回调，info.source 会标记 panel、input、clear、now、confirm。	`(value, timeString, info) => void`	`-`

TimePicker.RangePicker

属性	说明	类型	默认值
`TimePicker.RangePicker`	复用单值内核，输出 [start, end] 字符串元组。	`FC<TimeRangePickerProps>`	`-`
`value / defaultValue`	范围的受控值与初始值。	`[string \| null, string \| null]`	`-`
`placeholder`	支持单个占位文案或 [开始, 结束] 双占位。	`string \| [string, string]`	`['开始时间', '结束时间']`
`disabledTime`	第二个参数会标记 start 或 end，便于分别约束两个输入。	`(selection, type) => TimePickerDisabledConfig`	`-`
`order`	当开始时间晚于结束时间时自动排序。	`boolean`	`true`
`onCalendarChange / onChange`	分别响应草稿值与最终值变化，并带上 range 信息。	`(values, timeStrings, info) => void`	`-`