用途:在 shadcn UI 项目中添加、定制或调试 Calendar 与 Date Picker 时提供规范写法。Calendar 是 react-day-picker v9 的薄封装(DayPicker 重导出为 Calendar);Date Picker 不是独立组件,而是 Popover + Button(PopoverTrigger asChild)+ Calendar 的组合配方。
主要能力:给出 single、multiple、range 三种 mode 的选择决策与对应 selected 类型;说明 DateRange 为 { from, to? },拖拽中 to 可能为 undefined;提供禁用日期(disabled 支持 Date、Date[]、谓词及 v9 matcher 对象)、locale(经 date-fns 适配器)、modifiers 与 modifiersClassNames 语义化样式、className/classNames/components 定制层级等模式。
必要用法:mode 必须显式传入,文件必须加 "use client",state 类型需与 mode 匹配;DatePicker 需自行组合,不存在 date-picker 导出;触发按钮用 asChild,日期用 date-fns 的 format 渲染。
限制与迁移:v8 到 v9 存在静默破坏,旧 calendar.tsx 在 react-day-picker@9 下会异常,可用 pnpm dlx shadcn@latest add calendar --overwrite 恢复;旧属性如 fromMonth、disabledDays、selectedDays 等已更名。非公历日历需从 react-day-picker/persian、/hijri 入口导入。具体价格、平台支持等资料未提供。