date-pickers

MUI X Date/Time Pickers 是一套面向 React 的日期与时间选择组件库，围绕安装、配置、校验、表单集成与高级定制提供完整示例。文档适用于需要在 React 项目中实现日期、时间或日期区间选择的开发者。\n\n【安装与适配器】\n免费核心包通过 npm install @mui/x-date-pickers 安装；Pro 包 @mui/x-date-pickers-pro（含 DateRangePicker、DateTimeRangePicker 等）需要许可证。使用时需选择一个日期适配器：dayjs（推荐，体积小、解析快）、date-fns（React 生态常用）、luxon（功能丰富、不可变）、moment（旧库，新项目建议避免）。每种适配器均提供对应的 Adapter 组件与 LocalizationProvider 包裹示例。\n\n【核心组件】\n文档给出 DatePicker、TimePicker、DateTimePicker 的使用示例，以及 Pro 版本的 DateRangePicker、DateTimeRangePicker。覆盖 value/onChange 受控用法、ampm、views、format 等基础属性。\n\n【插槽与定制】\nv6 API 以 slots 替代 components、slotProps 替代 componentsProps。示例包括 textField 插槽、actionBar 动作按钮、toolbar 工具栏、day 自定义日期渲染（如高亮标记）。\n\n【校验】\n提供 minDate/maxDate 范围限制、shouldDisableDate（禁用周末、节假日、过去日期等）、shouldDisableTime（仅工作时间、排除午餐、限定分钟间隔）以及 onError 回调的错误信息映射。\n\n【表单集成】\n展示与 React Hook Form 的 Controller 配合方式，包括基础受控 DatePicker、Zod + React Hook Form 的 schema 校验、DateRangePicker 的表单校验与错误展示。\n\n【变体与本地化】\n介绍 StaticDatePicker（常显）、MobileDatePicker（强制对话框）、DesktopDatePicker（强制浮层）以及响应式 DatePicker。本地化部分包含 dayjs locale 导入与 localeText 按钮文案覆盖，还有自定义输入格式、受控打开状态、onChange 与 onAccept 的区别。\n\n【常见陷阱】\n提醒始终用 LocalizationProvider 包裹、空值用 null 而非 undefined、value 类型需与适配器匹配、date-fns locale 导入路径、深层导入利于 tree-shaking、SSR/Next.js 需 NoSsr 或 dynamic、Pro 组件需先设置许可证密钥、shouldDisableDate 全部返回 true 会死循环。\n\n【进阶模式】\n演示 dayjs 的 utc/timezone 插件用法，支持指定时区显示并按 UTC 存储，或使用系统时区自动检测。