Calendar
calendar日历 · MUI X 桥(DateCalendar) + 对外 ISO 字符串受控 + 瑚琏 token
用法
基础用法
非受控；传入 ISO 字符串作默认选中日。
六月 2026
一二三四五六日
tsx
<Calendar defaultValue="2026-06-15" />受控
对外受控值为 ISO 字符串，onValueChange 回传 ISO 或 null。
六月 2026
一二三四五六日
tsx
const [date, setDate] = useState<string | null>("2026-06-03");
<Calendar value={date} onValueChange={setDate} />限定可选范围
minDate / maxDate 之外的日期不可选。
六月 2026
一二三四五六日
tsx
<Calendar
defaultValue="2026-06-15"
minDate="2026-06-10"
maxDate="2026-06-20"
/>只读
可查看选中日但不可改动。
六月 2026
一二三四五六日
tsx
<Calendar value="2026-06-03" readOnly />何时用
需要在页面内常驻铺开一个月历面板让用户挑日期时用（如日程、筛选侧栏）。若想要点击触发、弹层选日期且带输入框，用 DatePicker；要选一段区间用 DateRangePicker；要连时间一起选用 DateTimePicker。
导入
ts
import { Calendar } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | null | — | ISO 字符串受控值；传入即受控 |
| defaultValue | string | — | ISO 字符串非受控默认值 |
| minDate | string | — | 可选最早日期（ISO），早于此禁选 |
| maxDate | string | — | 可选最晚日期（ISO），晚于此禁选 |
| disabled | boolean | false | 整体禁用 |
| readOnly | boolean | false | 只读：可查看不可改 |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (iso: string | null) => void | 受控回调，回传 ISO 或 null（替代 MUI 的 onChange） |
禁忌 / 坑
- 受控/非受控二选一：给了
value就走受控、必须配onValueChange才能改动；只想要初值用defaultValue，别同时给。 - 对外值恒为 ISO 字符串（非 Date 对象），回调
onValueChange也回传 ISO 或 null，跨组件传值直接用字符串即可。
相关
DatePicker · DateTimePicker · DateRangePicker · TimeField · Button · ShimmerButton
Playground
六月 2026
一二三四五六日
<Calendar defaultValue="2026-06-03" />