UI组件前端【免费下载链接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.项目地址https://gitcode.com/gh_mirrors/re/react-day-picker点击查看免费下载导读CalendarMonth是 react-day-picker 内部用于表示日历中一个月的核心数据类。它把该月所包含的周CalendarWeek[]与代表月份首日的Date绑定在一起是 DayPicker 渲染月份网格、实现自定义组件Custom Components与编写日期逻辑扩展时反复接触的基础模型。读完本文你将理解CalendarMonth的构造方式、两个公开属性date与weeks的语义、它在getMonths与useCalendar中的生成链路以及如何基于它编写自己的月份级逻辑。CalendarMonth 是什么在 react-day-picker 中一个日历页面由月 → 周 → 日三层结构构成。CalendarMonth位于最顶层官方类型文档的定义如下见 API 文档Represents a month in a calendar year. ACalendarMonthcontains the weeks within the month and the date of the month.即它表示公历年份中的某一个月并容纳该月内的所有周以及该月的日期信息。从源码看该类的完整实现非常精简位于 CalendarMonth.tsimport type { CalendarWeek } from ./CalendarWeek.js; /** * Represents a month in a calendar year. * * A CalendarMonth contains the weeks within the month and the date of the * month. */ export class CalendarMonth { constructor(month: Date, weeks: CalendarWeek[]) { this.date month; this.weeks weeks; } /** The date representing the first day of the month. */ date: Date; /** The weeks that belong to this month. */ weeks: CalendarWeek[]; }可以看到CalendarMonth是一个纯数据容器类Plain Data Class它没有方法、没有计算逻辑只负责把月份首日和周集合打包成一个对象供上层渲染与扩展逻辑统一消费。构造函数签名new CalendarMonth(month: Date, weeks: CalendarWeek[]): CalendarMonth参数类型含义monthDate代表该月第一天的Date对象weeksCalendarWeek[]属于该月的周集合构造函数逻辑极简直接把month赋给this.date、把weeks赋给this.weeks不做任何复制、排序或去重处理。也就是说调用方需要保证传入的weeks已经按正确的展示顺序排好。属性详解date: Date—— 月份首日date保存的是该月第一天的日期对象。官方文档的注释是 The date representing the first day of the month.需要注意的细节虽然注释强调第一天但构造函数本身并不对传入值做startOfMonth归一化——它是直接透传的。真正保证月份首日这一语义的是生成CalendarMonth的上游代码见下文getMonths它传入的displayMonths已经过getInitialMonth、getDisplayMonths等步骤的规范化处理。典型用途作为月份的稳定标识用于key、aria-label或月份级样式判断与CalendarDay.displayMonth配合判断某天是否属于当前显示月份在自定义组件中定位当前渲染的是哪个月。weeks: CalendarWeek[]—— 本月包含的周weeks是该月所有周的数组顺序即渲染顺序。官方注释为 The weeks that belong to this month.每个元素是CalendarWeek对象定义见 CalendarWeek.tsexport class CalendarWeek { constructor(weekNumber: number, days: CalendarDay[]) { this.days days; this.weekNumber weekNumber; } /** The number of the week within the year. */ weekNumber: number; /** The days that belong to this week. */ days: CalendarDay[]; }CalendarWeek又由weekNumber年内周序号和days: CalendarDay[]组成而每个CalendarDay见 CalendarDay.ts包装了一个Date及outside、displayMonth等展示信息。因此完整的数据层级是CalendarMonth ├── date: Date // 月份首日 └── weeks: CalendarWeek[] // 本月的周 ├── weekNumber: number // 周序号 └── days: CalendarDay[] // 本周的天 ├── date: Date ├── outside: boolean ├── displayMonth: Date └── isoDate / displayMonthId / dateMonthId ...从源码结构可以看出CalendarMonth是这一层级中面向月份的聚合根访问任何月份的渲染数据都可以从它开始逐层下钻。CalendarMonth 是如何生成的getMonths 调用链CalendarMonth实例并非用户手动创建而是由辅助函数getMonths在每次渲染时批量构建。该函数位于 getMonths.ts核心逻辑如下export function getMonths( displayMonths: Date[], dates: Date[], props: Pick DayPickerProps, broadcastCalendar | fixedWeeks | ISOWeek | reverseMonths , dateLib: DateLib, ): CalendarMonth[] { // ... const dayPickerMonths displayMonths.reduceCalendarMonth[]( (months, month) { const firstDateOfFirstWeek props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month); const lastDateOfLastWeek props.broadcastCalendar ? endOfBroadcastWeek(month) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month)); /** The dates to display in the month. */ const monthDates dates.filter((date) { return date firstDateOfFirstWeek date lastDateOfLastWeek; }); const nrOfDaysWithFixedWeeks props.broadcastCalendar ? 35 : 42; if (props.fixedWeeks monthDates.length nrOfDaysWithFixedWeeks) { // ... 补充额外日期凑齐固定 5 或 6 行 } const weeks: CalendarWeek[] monthDates.reduceCalendarWeek[]( (weeks, date) { const weekNumber props.ISOWeek ? getISOWeek(date) : getWeek(date); const week weeks.find((week) week.weekNumber weekNumber); const day new CalendarDay(date, month, dateLib); if (!week) { weeks.push(new CalendarWeek(weekNumber, [day])); } else { week.days.push(day); } return weeks; }, [], ); const dayPickerMonth new CalendarMonth(month, weeks); months.push(dayPickerMonth); return months; }, [], ); return props.reverseMonths ? dayPickerMonths.reverse() : dayPickerMonths; }这段代码揭示了CalendarMonth数据语义的几个关键点首日语义由上游保证getMonths接收的displayMonths: Date[]中的每个month即月份首日由getInitialMonth/getDisplayMonths规范化new CalendarMonth(month, weeks)直接沿用所以实例的date才具有月份第一天的含义。周由日期窗口聚簇生成先根据broadcastCalendar/ISOWeek/ 默认三种模式算出该月的首周起始日与末周结束日再过滤出窗口内的所有日期按getWeek或getISOWeek得到的周序号分组逐日组装CalendarDay后塞进CalendarWeek。fixedWeeks会影响weeks数量开启fixedWeeks时普通月补足到 42 天6 周广播日历broadcast补足到 35 天5 周因此weeks数组的长度可能随配置变化。reverseMonths决定月份顺序开启后CalendarMonth[]会被整体反转体现在months数组的排列上对单个月份内部的weeks顺序无影响。在 useCalendar 中的调用位置getMonths由useCalendar在useMemo中调用见 useCalendar.ts它负责把firstMonth展开为显示月份列表、日期列表然后依次调用getMonths→getWeeks→getDays最终组装出Calendar对象const months getMonths( displayMonths, dates, { broadcastCalendar: props.broadcastCalendar, fixedWeeks: props.fixedWeeks, ISOWeek: props.ISOWeek, reverseMonths: props.reverseMonths, }, dateLib, ); const weeks getWeeks(months); const days getDays(months);其中getWeeksgetWeeks.ts就是把每个CalendarMonth.weeks拼接成扁平的周列表export function getWeeks(months: CalendarMonth[]) { const initialWeeks: CalendarWeek[] []; return months.reduce((weeks, month) { return weeks.concat(month.weeks.slice()); }, initialWeeks.slice()); }同理getDaysgetDays.ts先取每个月的weeks再取每周的days得到日历中全部天。也就是说CalendarMonth是整个月 → 周 → 日数据链路的枢纽weeks属性既是月内的结构信息也是生成全局weeks/days列表的数据来源。CalendarMonth 在渲染与自定义组件中的角色默认渲染Month 组件CalendarMonth直接作为 props 传入默认的Month组件Month.tsxexport function Month( props: { /** The month to display in the grid. */ calendarMonth: CalendarMonth; /** The index of the month being displayed. */ displayIndex: number; } HTMLAttributesHTMLDivElement, ) { const { calendarMonth, displayIndex, ...divProps } props; return div {...divProps}{props.children}/div; }Month组件接收calendarMonth与displayIndex多个月份显示时该月的索引渲染为一个包裹月份网格的div。可以看到月份容器本身是无渲染的实际的周、日网格由MonthGrid、Week、Day等下层组件基于calendarMonth.weeks逐层展开。自定义组件场景当你通过components属性覆盖Month、MonthGrid、Week等组件参见 自定义组件指南时calendarMonth是你能拿到的月份级数据结构。常见用法包括在自定义Month中根据calendarMonth.date渲染月份标题或附加内容在自定义MonthGrid中遍历calendarMonth.weeks生成自己的周行在月份级实现特殊样式如当月天数少于 N 天时隐藏、跨月标记等。同时useCalendar返回的Calendar对象useCalendar.ts也公开了months: CalendarMonth[]字段自定义组件或外部逻辑可以直接读取整个日历的所有月份实例。测试验证类的基本行为仓库中为CalendarMonth提供了专门的单元测试CalendarMonth.test.ts直接验证了构造行为beforeEach(() { date new Date(); weeks [new CalendarWeek(1, days1), new CalendarWeek(2, days2)]; month new CalendarMonth(date, weeks); }); test(should have a date property, () { expect(month.date).toEqual(date); }); test(should have a weeks property, () { expect(month.weeks).toEqual(weeks); });测试确认了CalendarMonth的引用语义month.date与传入的date严格相等toEqual比较值而非克隆month.weeks与传入的周数组相等。这再次印证它是不做数据拷贝的轻量数据容器性能开销极小可在每次渲染中批量创建。与其他 Calendar 类的导出关系CalendarMonth通过 classes/index.ts 统一导出export * from ./CalendarDay.js; export * from ./CalendarMonth.js; export * from ./CalendarWeek.js; export * from ./DateLib.js;它与CalendarDay、CalendarWeek、DateLib一起构成 react-day-picker 的日历数据模型公共 API。开发者既可以 import 后手动构造测试数据如测试文件所示也可以只读取由useCalendar/ 自定义组件 props 传入的现成实例。实践要点小结不要手动修改weeks内容来干预渲染CalendarMonth由getMonths在useMemo中生成属性和配置fixedWeeks、ISOWeek、broadcastCalendar、reverseMonths等变化会触发重建直接改动实例会与下一次渲染结果冲突。用date做月份标识它是规范化的月份首日适合作为月份级key或用于与CalendarDay.displayMonth比对。读取层级数据需要全局周/天列表时优先使用useCalendar返回的calendar.weeks/calendar.days而不是手动展开多个CalendarMonth需要月份级信息时再遍历calendar.months。理解属性语义依赖上游规范化date的首日语义、weeks的排序均由getMonths及更上游的getDisplayMonths/getDates保证CalendarMonth本身只做透传存储。参考文件索引类定义CalendarMonth.ts单元测试CalendarMonth.test.ts关联类CalendarWeek.ts、CalendarDay.ts生成逻辑getMonths.ts、getWeeks.ts、getDays.ts调用入口useCalendar.ts默认渲染组件Month.tsx官方 API 文档CalendarMonth.md、自定义组件指南赞分享UI组件前端【免费下载链接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.项目地址https://gitcode.com/gh_mirrors/re/react-day-picker点击查看免费下载相关推荐react-day-picker 佛历日历深入解析 daypicker/buddhist 的 getDateLib() 日期库工厂函数react day picker 佛历日历深入解析 daypicker/buddhist 的 getDateLib 日期库工厂函数 react day piUI组件前端react-day-picker 类型守卫函数 isDateInterval() 深度解析源码实现、判定逻辑与实战用法react day picker 类型守卫函数 isDateInterval 深度解析源码实现、判定逻辑与实战用法 isDateInterval 是 ReacUI组件前端react-day-picker 的类型守卫 isDateRange源码解析、类型收窄与实战应用react day picker 的类型守卫 isDateRange源码解析、类型收窄与实战应用 isDateRange 是 react day pickerUI组件前端上一篇Retire.js 项目教程下一篇kyanos 常见问题排查指南运行环境、BTF 加载与 watch 内核耗时可视化解读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考