DateRangePicker 日期范围选择器
在同一个弹出月历中选择并展示开始与结束日期范围。
使用概览
适合使用
- 报表区间、住宿日期或活动周期需要成对录入时。
不建议使用
- 两个日期互不相关，或任务只需要一个截止日期时。
真实示例
报表日期范围
选择报表统计的开始和结束日期。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/date-range-picker.json基础用法
导入
import { DateRangePicker } from "@richardqiu/quartz/date-range-picker";JSX
<DateRangePicker aria-label="报表日期范围" calendarLabel="报表日期日历" locale="zh-CN" defaultMonth="2026-08" placeholder="选择起止日期" previousMonthLabel="上个月" nextMonthLabel="下个月" />状态与控制摘要
默认
键盘焦点可见
已打开
已选择
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | DateRangeValue | {} | 受控提供可逐步完成的开始与结束日期。 |
组合结构
- 01
DateRangePicker
键盘约定
- 第一次选择开始范围，第二次完成范围；Escape 保留未完成范围并恢复焦点。
可访问性契约
- 起止日期共享同一个具名日历 grid。
- 起点与终点作为两个由使用方命名的 ISO 值提交。