DateTimePicker
date-time-picker在一个浮层里同时选好日期和时间
用法
基础用法
左边一整块日历、右边时间列，两边各选各的互不干扰。对外值是定宽文本 YYYY-MM-DD HH:mm，字典序即时间序。
<DateTimePicker defaultValue="2026-06-08 09:30" />带秒 + 步进
withSeconds 加出秒列；minuteStep / secondStep 控制列粒度（常用 5 / 15 / 30）。
<DateTimePicker withSeconds minuteStep={15} defaultValue="2026-06-08 09:30:00" />限定区间
minDateTime / maxDateTime 是**日期时间整体**的边界：日期部分限制日历，时间部分只在压着边界的那一天生效 —— 区间内部的日子 24 小时全开。
<DateTimePicker
defaultValue="2026-06-10 12:00"
minDateTime="2026-06-08 09:30"
maxDateTime="2026-06-20 18:00"
/>自定义显示格式
displayFormat 只改触发器上的显示，对外值形状不变。
<DateTimePicker defaultValue="2026-06-08 09:30" displayFormat="M 月 D 日 HH:mm" />尺寸
size 与 Input / Select 共用同一套刻度（sm 32px / md 40px / lg 48px），同一行表单里高度天然对齐。
<DateTimePicker size="sm" defaultValue="2026-06-08 09:30" />
<DateTimePicker size="md" defaultValue="2026-06-08 09:30" />
<DateTimePicker size="lg" defaultValue="2026-06-08 09:30" />禁用 / 只读
disabled 整体置灰且打不开；readOnly 能看面板但选不动。
<DateTimePicker defaultValue="2026-06-08 09:30" disabled />
<DateTimePicker defaultValue="2026-06-08 09:30" readOnly />何时用
一个字段要同时定下「哪天」和「几点」时用：会议预约、任务截止、排班起止。
弹层里左边是 Calendar 面板、右边是时间列，两边各选各的互不干扰。
只要日期用 DatePicker；只要时间用
TimePicker（列选）或 TimeField（键盘录入）。
把日期和时间拆成两个字段通常比这个组件更好填 —— 先想清楚是不是真需要一体化。
本组件在 0.15.0 之前是 MUI XDateTimePicker的桥接件，要装四个 optional peer 并挂MuiBridgeProvider。现在是零依赖自研，装库即用。
导入
import { DateTimePicker } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | null | - | 受控值，"YYYY-MM-DD HH:mm"（withSeconds 时带秒），中间一个空格 |
| defaultValue | string | null | - | 非受控初始值，形状同上 |
| withSeconds | boolean | false | 显示秒列，值形状随之带秒 |
| size | "sm" | "md" | "lg" | "md" | 触发器尺寸档，刻度与 Input 一致（32 / 40 / 48px），同一行表单里高度天然对齐 |
| minuteStep | number | 1 | 分钟列步进（常用 5 / 15 / 30） |
| secondStep | number | 1 | 秒列步进 |
| minDateTime | string | - | 最早可选时刻（含），形状同 value。日期部分限制日历，时间部分只在边界那天生效 |
| maxDateTime | string | - | 最晚可选时刻（含） |
| disabledDate | (isoDate: string) => boolean | - | 逐日禁用判定，入参恒为 "YYYY-MM-DD"，只筛日期不筛时刻 |
| placeholder | string | "选择日期时间" | 触发器占位文本 |
| displayFormat | string | 原样显示 | 触发器显示格式（dayjs format 串）。只影响显示，对外值形状不变 |
| clearable | boolean | true | 有值且非 disabled/readOnly 时显示清除按钮 |
| showNow | boolean | true | 面板底部「此刻」快捷（按步进向下取整对齐） |
| disabled | boolean | false | 整体置灰，面板打不开 |
| readOnly | boolean | false | 面板可看，但选不动 |
| aria-label | string | - | 触发器无障碍名（无可见 label 时给） |
| className | string | - | 落在触发器外层容器 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value: string | null) => void | 选中/清空回调；清空回传 null |
国际化
占位文本、清除按钮、时/分/秒列、此刻和确定文案跟随最近的 ConfigProvider locale。
显式 placeholder 优先于 Locale。旧自定义 Locale 若没有components.dateTimePicker，仍使用原有中文兼容默认值。
禁忌 / 坑
- 值是定宽文本，不是 `Date` 也不是 ISO 时间戳：
"YYYY-MM-DD HH:mm"，中间一个空格。
定宽 → 字典序即时间序，范围比较直接比字符串，也不会被时区搅进来。
从 0.15.0 之前的 MUI 版迁过来要改存量数据（那份对外是完整 ISO 时间戳）。
- `minDateTime`/`maxDateTime` 的时间部分只在压着边界的那一天生效。选到区间内部的日子时，
一天 24 小时全开 —— 这是对的：「6 月 8 日 09:30 起可选」不该把 6 月 9 日的 00:00 也禁掉。
这条最容易实现错，也最容易被误报成 bug。
- 选日期不关面板：时间还没选完就关掉等于逼用户重开。要收起面板点「确定」，或点面板外。
- 只选了日期没碰时间列时，时间按
00:00补（若被minDateTime顶着，则补成那天的最早可选时刻）。 - 反过来，没选日期就先点了时间列，日期会落到今天 —— 否则这一下点了等于没点。
disabledDate只筛日期。想按「星期几的某个时段」这种粒度禁选，本组件做不到，
需要在提交时自行校验。
minuteStep只影响列里能点到的候选，不校验外部传入的value：
传 "2026-06-08 09:07" 配 minuteStep={15} 时，07 分不在列里，分钟列会显示为无选中。
- 触发器是
role="combobox"的按钮：未在 Props 里列出的原生属性（aria-*/data-*/id/title/onBlur…）落到它身上，不是外层容器 —— 读屏念的、能聚焦的都是它（#293）。 - 放进 Field 时，
label的htmlFor、aria-describedby、invalid与disabled会自动串到触发器上；<Field required>注入的aria-required同理。0.54.0 之前这条链是断的（label 指向一个不存在的 id，读屏念不出字段名），升级后无需改调用代码。 - 测试里按角色取触发器要用
getByRole("combobox")，不再是"button"。
相关
DatePicker · Calendar · TimePicker · TimeField · DateRangePicker · Scheduler
Playground
<DateTimePicker
value={dateTime}
onValueChange={setDateTime}
/>