DateTimePicker
date-time-picker日期时间选择 · MUI X 桥(年月日+时钟一体弹层) + ISO 受控 + 步进/秒
用法
基础用法
一体弹层同时选「年月日 + 时间」，24 小时制。
2026-06-03 14:30
tsx
<DateTimePicker label="选择日期时间" defaultValue="2026-06-03T14:30:00" />受控
对外受控值为含日期+时间的 ISO 字符串。
2026-06-03 14:30
tsx
const [dt, setDt] = useState<string | null>("2026-06-03T14:30:00");
<DateTimePicker label="选择日期时间" value={dt} onValueChange={setDt} />分钟步进
minutesStep 约束分钟列的步进（如预约场景 15 分钟一档）。
2026-06-15 09:00
tsx
<DateTimePicker label="预约时间" defaultValue="2026-06-15T09:00:00" minutesStep={15} />精确到秒
withSeconds 启用秒列，格式变为 YYYY-MM-DD HH:mm:ss。
2026-06-15 09:00:30
tsx
<DateTimePicker label="时间戳" defaultValue="2026-06-15T09:00:30" withSeconds />禁用
整体置灰，不可打开也不可编辑。
2026-06-03 14:30
tsx
<DateTimePicker label="选择日期时间" value="2026-06-03T14:30:00" disabled />何时用
需要在一个弹层里同时选日期 + 时间时用（预约、起止时间戳）。只选日期用 DatePicker；只选时间（HH:mm）用 TimeField；选日期区间用 DateRangePicker。
导入
ts
import { DateTimePicker } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | null | — | ISO 字符串受控值（含日期+时间）；传入即受控 |
| defaultValue | string | — | ISO 字符串非受控默认值 |
| minDateTime | string | — | 可选最早日期时间（ISO） |
| maxDateTime | string | — | 可选最晚日期时间（ISO） |
| minutesStep | number | — | 时间步进分钟数（如 5、15、30） |
| withSeconds | boolean | false | 是否启用秒（默认仅到分钟） |
| 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 字符串（含时间，非 Date），回调也回传 ISO 或 null。
- 默认只到分钟，要秒级须显式开
withSeconds；minutesStep只约束分钟轮的步进，不会自动对齐defaultValue。
相关
Calendar · DatePicker · DateRangePicker · TimeField · Button · ShimmerButton
Playground
2026-06-03 14:30
<DateTimePicker label="选择日期时间" defaultValue="2026-06-03T14:30:00" />