日历 Calendar
封装自 react-day-picker 的日历组件，集成了自定义样式和按钮风格，适用于选择日期、范围等功能。
📦 引入方式
import { Calendar } from '@npmqg/react-ui-calendar';
🧩 使用示例
📚 基本用法
- 示例
- 源码
May 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
<Calendar />
📆 设置默认日期
- 示例
- 源码
May 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
<Calendar selected={new Date()} />
🗓️ 日期范围选择
- 示例
- 源码
May 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
<Calendar mode="range" selected={{ from: new Date(2025, 4, 1), to: new Date(2025, 4, 10) }} />
📅 限制可选日期
- 示例
- 源码
May 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
<Calendar disabled={{ before: new Date(2025, 0, 1), after: new Date(2025, 11, 31) }} />
🌐 国际化
- 示例
- 源码
五月 2025
| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
import { zhCN } from "date-fns/locale";
<Calendar locale={zhCN} />;
🧩 Props
| 属性 | 类型 | 默认值 | 说明 | ||
|---|---|---|---|---|---|
selected | `Date | undefined` | — | 当前选择的日期 | |
onDayClick | (date: Date) => void | — | 点击日期时的回调函数 | ||
onMonthChange | (month: Date) => void | — | 切换月份时的回调函数 | ||
disabled | boolean | false | 是否禁用日期选择器 | ||
onDateChange | (date: Date) => void | — | 日期变化时的回调函数 | ||
onFocus | (date: Date) => void | — | 聚焦日期选择器时触发的回调函数 | ||
className | string | — | 自定义类名，用于扩展组件样式 | ||
locale | string | 'en' | 本地化语言设置 | ||
firstDayOfWeek | number | 0 | 设置一周的第一天（0: Sunday, 1: Monday） | ||
disabledDays | `Date | Date[] | (date: Date) => boolean` | — | 禁用某些特定的日期 |
weekStartsOn | number | 0 | 设置一周的开始（0: Sunday, 1: Monday） |
🎨 样式说明
该组件使用了 TailwindCSS 样式，并集成了 Button 组件的 variant: link 风格，使日历按钮与项目样式一致。
| 部分 | 样式类说明 |
|---|---|
| 导航按钮 | 使用 ChevronLeft / ChevronRight，并继承 Button 的 link 样式 |
| 日期单元格 | hover / selected 状态下有 accent / primary 的样式区分 |
| 范围选择 | 支持高亮起始与结束日期，并自动圆角 |
| 禁用 / 今天 / 外部天 | 有特殊状态样式，例如 text-muted-foreground, bg-accent 等 |
💡 小贴士
- 所有
DayPicker支持的 props 都可以传入Calendar。 showOutsideDays默认启用，可显示前后月份日期。