手写 React 日历组件，支持月份切换、日期选择、禁用日期和受控模式。
import { Calendar } from '@enterprise-ui/react19';
<Calendar defaultValue={new Date()} />当前选择：7/12/2026
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
<Calendar value={selectedDate} onChange={setSelectedDate} />当前范围：7/12/2026 - 7/18/2026
const [selectedRange, setSelectedRange] = useState<CalendarRange>({
start: new Date(),
end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 6),
});
<Calendar
mode="range"
rangeValue={selectedRange}
onRangeChange={setSelectedRange}
/>可以通过 minDate、maxDate 和 disabledDate 组合限制可选范围。
<Calendar
defaultValue={new Date()}
minDate={new Date()}
disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 受控选中日期 | Date | - |
| mode | 选择模式，支持单选和范围选择 | 'single' | 'range' | 'single' |
| defaultValue | 非受控默认选中日期 | Date | - |
| rangeValue | 受控范围值 | { start?: Date; end?: Date } | - |
| defaultRangeValue | 非受控默认范围值 | { start?: Date; end?: Date } | - |
| onRangeChange | 范围选择回调 | (range: CalendarRange) => void | - |
| defaultMonth | 初始展示月份 | Date | new Date() |
| onChange | 日期选择回调 | (date: Date) => void | - |
| disabledDate | 自定义禁用日期规则 | (date: Date) => boolean | - |
| minDate | 最小可选日期 | Date | - |
| maxDate | 最大可选日期 | Date | - |
| weekStartsOn | 一周从周日或周一开始 | 0 | 1 | 1 |
| showOutsideDays | 是否展示非本月补齐日期 | boolean | true |
| renderDay | 自定义日期格子内容 | (date, meta) => React.ReactNode | - |