DatePicker
date-picker日期选择 · MUI X 桥(输入+弹层日历) + ISO 受控 + min/max
用法
基础用法
点击输入框弹出日历选择日期。
2026/06/03
tsx
<DatePicker label="选择日期" defaultValue="2026-06-03" />受控
对外受控值为 ISO 字符串，onValueChange 回传 ISO 或 null。
2026/06/03
tsx
const [date, setDate] = useState<string | null>("2026-06-03");
<DatePicker label="选择日期" value={date} onValueChange={setDate} />限定可选范围
minDate / maxDate 之外的日期在弹出日历中不可选。
2026/06/15
tsx
<DatePicker
label="到期日"
defaultValue="2026-06-15"
minDate="2026-06-10"
maxDate="2026-06-20"
/>禁用
整体置灰，不可打开也不可编辑。
2026/06/03
tsx
<DatePicker label="选择日期" value="2026-06-03" disabled />何时用
表单里选单个日期、要带输入框 + 弹层日历时用。需要月历常驻铺开（无输入框）用 Calendar；选一段区间用 DateRangePicker；连时间一起选用 DateTimePicker。
导入
ts
import { DatePicker } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | null | — | ISO 字符串受控值；传入即受控 |
| defaultValue | string | — | ISO 字符串非受控默认值 |
| minDate | string | — | 可选最早日期（ISO） |
| maxDate | 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 字符串（非 Date），回调也回传 ISO 或 null。
相关
Calendar · DateTimePicker · DateRangePicker · TimeField · Button · ShimmerButton
Playground
2026/06/03
<DatePicker label="选择日期" defaultValue="2026-06-03" />