组件 · 数据录入
Calendar 日历
保留 Headless 受控契约，仅提供视觉样式和导航图标。
引入
tsx
import { Calendar } from '@selrux/ui/calendar';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
2026年10月
周一
周二
周三
周四
周五
周六
周日
代码演示
基础单日选择
默认显示今天所在月份。
2026年10月
周一
周二
周三
周四
周五
周六
周日
预选日期
defaultValue 只设置初始值，后续由组件维护。
2026年10月
周一
周二
周三
周四
周五
周六
周日
日期范围
先选择起点，再选择终点，期间日期会高亮。
2026年10月
周一
周二
周三
周四
周五
周六
周日
受控单日
外部按钮和月历使用同一个值。
2026年10月
周一
周二
周三
周四
周五
周六
周日
受控范围
两次点击形成范围，也可以从外部清除。
2026年10月
周一
周二
周三
周四
周五
周六
周日
受控月份
外部导航按钮和日历标题保持同步。
2026年10月
周一
周二
周三
周四
周五
周六
周日
日期限制
只允许 2026 年工作日作为可选日期。
2026年10月
周一
周二
周三
周四
周五
周六
周日
范围约束
起止日期同样遵守边界和禁用日。
2026年10月
周一
周二
周三
周四
周五
周六
周日
英文与导航图标
locale、weekStartsOn 和自定义图标可同时配置。
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
API
属性覆盖：示例用到 15 / 15 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Calendar
保留 Headless 受控契约，仅提供视觉样式和导航图标。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mode | - | "single" | "range" | - |
active | 月历当前是否处于交互状态；激活时 Headless 会聚焦活动日期。 | boolean | - |
value | 受控选中日期；传 null 表示受控空值。 | Date | CalendarDateRange | null | - |
defaultValue | 非受控初始选中日期。 | Date | CalendarDateRange | - |
month | 受控显示月份，可传该月任意一天。 | Date | - |
defaultMonth | 非受控初始显示月份。 | Date | - |
onValueChange | 选中日期改变时触发；清除时传 undefined。 | ((value: Date | undefined) => void) | ((range: CalendarDateRange) => void) | - |
onMonthChange | 显示月份改变时触发。 | ((month: Date) => void) | - |
locale | 日期格式化语言标签。 | string | - |
weekStartsOn | 显式覆盖语言默认周起始日。 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | - |
minDate | 可选日期最早边界，包含当日。 | Date | - |
maxDate | 可选日期最晚边界，包含当日。 | Date | - |
isDateDisabled | 为真时阻止选择和键盘焦点进入该日期。 | ((date: Date) => boolean) | - |
data-selrux | - | string | - |
previousIcon | - | ReactNode | - |
nextIcon | - | ReactNode | - |
另有 2 项原生属性与事件继承自 ，原样透传。
导出类型：CalendarProps
无障碍
摘自源码 JSDoc。
Calendar.active：月历当前是否处于交互状态；激活时 Headless 会聚焦活动日期。Calendar.isDateDisabled：为真时阻止选择和键盘焦点进入该日期。