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点击查看免费下载DayPicker 用Modifier修饰器来表示日历中一个日期的不同样式或状态。这个类型别名在 src/types/Modifiers.ts 中定义为string。本文将从这一看似简单的定义出发拆解 DayPicker 修饰器系统的完整设计内部修饰器如selected、disabled、today、自定义修饰器modifiersprop、修饰器的匹配与传播以及如何在样式和可访问性中使用它们。注意本文内容基于仓库中 version-8.10.2 版本的 API 文档。版本 9 及更高版本对修饰器 API 做了一些调整例如modifiersClassNames被重构本文的代码示例均以 8.10.2 为准。Modifier的定义Modifier:string一个modifier修饰器代表日历中显示的一个日期的不同样式或状态。它本身就是一个字符串用作修饰器名称modifier name这些字符串是修饰器映射modifier map中的键key控制 DayPicker 如何表现和显示日期。源码中它的定义位于 src/types/Modifiers.ts:9// 逻辑定义type Modifier string虽然类型简单但它支撑起整个修饰器系统——多个复合类型都以它为键类型别名定义说明DayModifiersRecordModifier, Matcher \| Matcher[]通过modifiersprop 传入的自定义修饰器CustomModifiersRecordModifier, Matcher[]自定义修饰器的映射值只能是Matcher数组ActiveModifiersRecordModifier, true PartialRecordInternalModifier, true与某个日期匹配的修饰器集合这些类型都围绕同一个概念修饰器名称Modifier字符串→ 匹配规则Matcher或匹配结果true。内部修饰器DayPicker 内置了一组内部修饰器其名称由 InternalModifier 枚举 定义枚举成员值说明Disableddisabled通过disabledprop 应用到被禁用日期的修饰器Hiddenhidden通过hiddenprop 应用到被隐藏日期的修饰器Outsideoutside应用于当前显示月份之外的日期外部日期RangeEndrange_end范围选择模式下应用于所选范围的结束日RangeMiddlerange_middle范围选择模式下应用于所选范围的中间日RangeStartrange_start范围选择模式下应用于所选范围的开始日Selectedselected通过selectedprop 应用到被选中日期的修饰器Todaytoday通过todayprop 应用到指定日期的修饰器这些内部修饰器在 DayPickerBase 接口中通过对应 props 配置disabled?: Matcher | Matcher[]将disabled修饰器应用到匹配的日期。hidden?: Matcher | Matcher[]将hidden修饰器应用到匹配的日期并将其从日历中隐藏。selected?: Matcher | Matcher[]将selected修饰器应用到匹配的日期。today?: Date设置“今天”的日期默认是当前日期该日期会获得today修饰器。例如选中 2024 年 10 月 1 日并禁用 2024 年 10 月 15 日DayPicker selected{new Date(2024, 9, 1)} disabled{new Date(2024, 9, 15)} /匹配逻辑isMatch修饰器名称是如何被应用到具体日期上的关键在于 isMatch 函数其源码位于 src/contexts/Modifiers/utils/isMatch.ts。它接受一个日期和一个Matcher数组返回该日期是否匹配任何一个匹配器。匹配器Matcher可以是一个日期、一个日期范围{from, to}、一个星期几{dayOfWeek}、一个布尔函数或任意组合。这也是 DayPicker 能支持 禁用日期、范围选择 等功能的基础。自定义修饰器modifiers prop除了内部修饰器DayPicker 还允许通过modifiersprop 定义自定义修饰器。modifiers的类型是 DayModifiersRecordModifier, Matcher | Matcher[]也就是一个从修饰器名称映射到匹配规则的记录。import { DayPicker } from react-day-picker; export function App() { return ( DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] }, // 匹配周六和周日 holiday: new Date(2024, 9, 1), // 匹配特定日期 past: { before: new Date() }, // 匹配所有过去的日期 }} / ); }自定义修饰器也可以与内置修饰器组合使用例如先禁用一部分日期、再对它们应用自定义样式DayPicker disabled{{ before: new Date() }} modifiersClassNames{{ disabled: my-disabled-day, holiday: my-holiday-day, }} /CustomModifiers 与DayModifiers的区别在于它只接受Matcher数组RecordModifier, Matcher[]。修饰器的匹配结果ActiveModifiers当 DayPicker 渲染每个日期时会计算出该日期匹配的所有修饰器生成一个ActiveModifiers对象src/types/Modifiers.tsconst activeModifiers: ActiveModifiers { selected: true, customModifier: true };这是一个RecordModifier, true与PartialRecordInternalModifier, true的交叉类型。它的键就是匹配上的修饰器名称Modifier值固定为true。在自定义DayContent或DayButton中你可以通过 useActiveModifiers hook 获取某个日期的活动修饰器import { useActiveModifiers } from react-day-picker; function MyDayContent({ date, displayMonth }) { const activeModifiers useActiveModifiers(date, displayMonth); // activeModifiers.selected true 表示该日期被选中 return div{date.getDate()}/div; }修饰器驱动的样式与类名修饰器最主要的用途之一是驱动样式。DayPicker 8.x 提供两种方式modifiersClassNamesRecordstring, string为匹配某修饰器的日期元素指定 CSS 类名。modifiersStylesRecordstring, CSSProperties为匹配某修饰器的日期元素指定内联样式。DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] } }} modifiersClassNames{{ weekend: weekend-day }} modifiersStyles{{ weekend: { color: red } }} /在底层getStyleForModifiers 等辅助函数负责把匹配到的修饰器转换成最终的样式/类名。你可以在 getStyleForModifiers.test.ts 和 createGetModifiers.test.ts 中看到对应的测试用例例如如何为单个日期同时应用多个修饰器样式。修饰器的计算与传播每个日期的完整修饰器集合由 createGetModifiers 计算在 DayPicker.tsx:199 中调用它合并了两部分内部修饰器InternalModifier根据selected、disabled、hidden、today、范围选择状态等 props 自动计算自定义修饰器DayModifiers来自modifiersprop。结果通过 DayPickerContext 提供给各个子组件day 按钮、day 内容等从而统一影响样式、类名以及可访问性标签。在可访问性标签中使用修饰器修饰器还可以驱动可访问性文本。labelDayButton 的测试展示了如何根据修饰器如selected、disabled生成日期按钮的aria-label让屏幕阅读器用户能够了解日期的状态const dayModifiers: Modifiers { selected: true, disabled: false }; // 生成类似 2024 年 10 月 1 日已选中 的标签这也是 DayPicker 在 可访问性指南 中承诺的基础之一。总结Modifier类型虽然只是一个string却是 DayPicker 修饰器系统的“胶水”它作为修饰器名称modifier name把Modifier → Matcher → 匹配结果 → 样式/标签这条链路串起来。理解了它你就理解了 DayPicker 如何通过selected、disabled、hidden、today等内部修饰器和modifiers自定义修饰器灵活地控制日期的外观、状态与可访问性。赞分享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点击查看免费下载相关推荐daypicker/react v10 API 全解析从 DayPicker 组件到类型系统的完整指南daypicker/react v10 API 全解析从 DayPicker 组件到类型系统的完整指南 本文以 react day picker 仓库中 aUI组件前端React DayPicker v8 DayModifiers 类型详解自定义日期修饰器的声明与实战用法React DayPicker v8 DayModifiers 类型详解自定义日期修饰器的声明与实战用法 导读 本文围绕 React DayPicker v8UI组件前端30 分钟出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路径30 分钟出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路径 OpCore Simplify 是一款 Python 写的UI组件前端上一篇如何快速解决Mac过热问题smcFanControl风扇控制完整指南下一篇终极指南apt-offline离线包管理工具完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考