TimeField
time-field时间输入 · MUI X 桥(分段编辑 HH:mm 24h) + ISO 受控
用法
基础用法
纯键盘段编辑的时间输入框，24 小时制（HH:mm），无弹层。
09:30
tsx
<TimeField label="选择时间" defaultValue="2026-06-03T09:30:00" />受控
对外受控值为 ISO 字符串，onValueChange 回传 ISO 或 null。
09:30
tsx
const [time, setTime] = useState<string | null>("2026-06-03T09:30:00");
<TimeField label="选择时间" value={time} onValueChange={setTime} />只读
可查看但不可编辑各时间段。
09:30
tsx
<TimeField label="选择时间" value="2026-06-03T09:30:00" readOnly />禁用
整体置灰，不可编辑。
09:30
tsx
<TimeField label="选择时间" value="2026-06-03T09:30:00" disabled />何时用
只选时间（HH:mm 24 小时制分段输入、无弹层）时用。要日期 + 时间一体弹层用 DateTimePicker；只选日期用 DatePicker。
导入
ts
import { TimeField } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | null | — | ISO 字符串受控值；传入即受控 |
| defaultValue | string | — | ISO 字符串非受控默认值 |
| label | string | "选择时间" | 输入框 label |
| disabled | boolean | false | 禁用 |
| readOnly | boolean | false | 只读 |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (iso: string | null) => void | 受控回调，回传 ISO 或 null（替代 MUI 的 onChange） |
禁忌 / 坑
- 受控/非受控二选一：给
value走受控须配onValueChange；只想要初值用defaultValue，别同时给。 - 对外值仍是完整 ISO 字符串（带日期部分，只是时间可编辑），不是裸
HH:mm；回调回传 ISO 或 null。
相关
Calendar · DatePicker · DateTimePicker · DateRangePicker · Button · ShimmerButton
Playground
09:30
<TimeField label="选择时间" defaultValue="2026-06-03T09:30:00" />