DatePicker 日期选择器
通过输入触发器与弹出月历选择一个不含时区的日期。
使用概览
适合使用
- 表单需要单个日期，并希望同时支持浏览月历与查看选中值时。
不建议使用
- 任务需要开始和结束两个日期，或日期必须精确到时间时。
真实示例
开始日期选择器
从弹出月历中选择项目开始日期。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/date-picker.json基础用法
导入
import { DatePicker } from "@richardqiu/quartz/date-picker";JSX
<DatePicker aria-label="开始日期" calendarLabel="开始日期日历" locale="zh-CN" defaultMonth="2026-08" placeholder="选择日期" previousMonthLabel="上个月" nextMonthLabel="下个月" />状态与控制摘要
默认
键盘焦点可见
已打开
已选择
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | PlainDate | 未设置 | 以年月日字符串受控表示当前选择日期。 |
组合结构
- 01
DatePicker
键盘约定
- Enter 或空格键打开日历，Escape 关闭并把焦点还给触发器。
可访问性契约
- 触发器与日历标签均由使用方提供。
- 表单值保持规范的 YYYY-MM-DD 字符串。