Calendar 日历
在月历网格中浏览并选择单个日期或连续日期范围。
使用概览
适合使用
- 日期的星期位置和相邻日期会影响用户选择时。
不建议使用
- 只输入已知日期且键盘直接录入比浏览月历更快时。
真实示例
预约日期日历
以中文月历浏览并选择预约日期。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/calendar.json基础用法
导入
import { Calendar } from "@richardqiu/quartz/calendar";JSX
<Calendar aria-label="预约日期" locale="zh-CN" defaultMonth="2026-08" previousMonthLabel="上个月" nextMonthLabel="下个月" />状态与控制摘要
默认
键盘焦点可见
已选择
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | "single" | "range" | "single" | 决定选择一个日期还是起止日期范围。 |
组合结构
- 01
Calendar
键盘约定
- 方向键按天或周跨月移动，Enter 或空格键选择当前日期。
可访问性契约
- 具名 grid 暴露星期标题与已选日期。
- 语言环境只改变标签，不改变 ISO 日期值。