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-day-picker 组件库的入口函数通过一个DayPickerProps参数即可渲染出完整的日历组件。本文以 API 文档 DayPicker.md 为主线结合 packages/react-day-picker/src/DayPicker.tsx 及其测试用例逐层拆解函数签名、props 类型体系、内部渲染管线与 DOM 输出结构帮助读者掌握该组件的配置方式、选择模式工作原理以及如何在业务项目中正确使用它。读完本文你将能够熟练配置 DayPicker 的导航、本地化、选择模式与无障碍属性并理解这些配置在源码层面如何生效。DayPicker()组件库的核心入口根据 API 文档DayPicker是一个函数组件其完整签名如下DayPicker(initialProps: DayPickerProps): Element参数initialProps类型为DayPickerProps即DayPicker /组件的全部 props返回值Element即渲染完成的日历组件定义位置packages/react-day-picker/src/DayPicker.tsx:44导出方式通过 packages/react-day-picker/src/index.ts 中的export * from ./DayPicker.js对外公开因此既可写为DayPicker {...props} /也可直接以函数形式调用。最小可用用法如下取自仓库示例 examples/Single.tsximport { DayPicker } from daypicker/react; import React from react; export function Single() { return DayPicker modesingle /; }说明仓库内的文档与示例如 examples/Single.tsx、apps/website/docs/docs/navigation.mdx统一通过工作区别名daypicker/react导入npm 发布包名则为react-day-picker详见 packages/react-day-picker/package.json当前仓库版本为 10.0.1要求 Node 18、React 16.8。DayPickerProps函数唯一参数的完整类型体系DayPickerProps并不是一个简单的接口而是“公共配置 选择模式”的联合类型。其定义位于 packages/react-day-picker/src/types/props.ts:26export type DayPickerProps PropsBase ( | PropsSingle | PropsSingleRequired | PropsMulti | PropsMultiRequired | PropsRange | PropsRangeRequired | { mode?: undefined; required?: undefined } );也就是说props 由三部分组成PropsBase与选择模式无关的通用配置本地化、导航、样式、事件等选择模式联合mode取single、multiple、range时分别对应一组不同的selected/onSelect类型约束且区分required是否为true无选择模式mode与required均为undefined此时 DayPicker 只作为纯日历展示不可交互选择函数体中isInteractive mode ! undefined || onDayClick ! undefined即据此判断。这样的类型设计让 TypeScript 能在编译期根据mode推断selected、onSelect的签名例如moderange时selected必须是DateRange | undefined。PropsBase与模式无关的通用配置PropsBase接口packages/react-day-picker/src/types/props.ts:44定义了全部通用参数可按下表分类分类关键 props说明基础className、style、id、title、lang、dir、nonce作用于根元素的 DOM 属性dir支持ltr/rtl月份与导航defaultMonth、month、numberOfMonths、startMonth、endMonth、pagedNavigation、reverseMonths、hideNavigation、disableNavigation、captionLayout、navLayout、reverseYears控制初始月份、展示月数、导航边界与按钮布局详见下文日历内容fixedWeeks、hideWeekdays、showOutsideDays、showWeekNumber、broadcastCalendar、ISOWeek、animate控制网格结构、周数列、广播日历与动画选择mode、required、disabled、hidden、today、modifiers选择模式与修饰符modifiers体系本地化locale、weekStartsOn、firstWeekContainsDate、numerals、timeZone、noonSafe、useAdditionalWeekYearTokens、useAdditionalDayOfYearTokens语言、周起始日、数字系统与时区定制classNames、styles、modifiersClassNames、modifiersStyles、components、formatters、labels、dateLib覆盖类名、样式、子组件、格式化函数与标签函数无障碍aria-label、aria-labelledby、roleapplication或dialog、autoFocus、footer屏幕阅读器支持事件onMonthChange、onNextClick、onPrevClick、onDayClick、onDayFocus、onDayBlur、onDayKeyDown、onDayMouseEnter、onDayMouseLeave导航与日期交互回调几个值得注意的细节受控与非受控月份defaultMonth让 DayPicker 自行维护当前月份而month需配合onMonthChange由外部受控。对应实现见 useCalendar.ts 中的useControlledValue。captionLayout取值label默认纯文本标题、dropdown月份年份下拉、dropdown-months仅月份下拉、dropdown-years仅年份下拉。源码中该参数直接影响MonthCaption内部渲染DropdownNav还是CaptionLabel见 DayPicker.tsx:477。navLayout取值around标题两侧各一个按钮与after按钮置于标题之后保证视觉顺序与 Tab 顺序一致未设置时保持传统布局DayPicker.tsx:422。默认值numberOfMonths默认为1defaultMonth默认为当前月份numerals默认为latnlocale默认为 date-fns 的enUS。disabled/hidden接受单个Matcher或Matcher[]如{ dayOfWeek: [0, 6] }、new Date(...)、before/after/between等日期区间匹配器前者禁止选择后者直接隐藏日期。modifiers自定义修饰符映射例如{ weekend: { dayOfWeek: [0, 6] }, holiday: [new Date(2023, 11, 25)] }可配合modifiersClassNames与modifiersStyles定制样式。选择模式single / multiple / range 的类型约束模式相关接口同样定义在 types/props.tsPropsSingle/PropsSingleRequiredselected为Date | undefinedrequired: true时onSelect收到Date否则收到Date | undefined。PropsMulti/PropsMultiRequiredselected为Date[]支持min/max限制可选数量。PropsRange/PropsRangeRequiredselected为DateRange{ from, to }支持min/max、excludeDisabled选中包含禁用日时重置区间、resetOnSelect再次点击已完整区间时开始新区间9.14 新增。函数体内的运行时管线从 props 到日历DayPicker的组件体packages/react-day-picker/src/DayPicker.tsx在每次渲染时执行一条清晰的流水线可分为以下几个阶段。1. 时区预处理函数开头DayPicker.tsx:45会先检查props.timeZone。若设置了时区则将所有日期类 props——today、month、defaultMonth、startMonth、endMonth、selected按single/multiple/range三种模式分别转换、disabled、hidden、modifiers——统一通过toTimeZone与convertMatchersToTimeZone转换到目标时区。这意味着日历内的所有日期计算都会在指定时区下进行避免跨时区出现日期漂移。2. dateLib 与本地化装配随后通过useMemoDayPicker.tsx:101一次性组装dateLib以locale、weekStartsOn、firstWeekContainsDate、timeZone、numerals等参数实例化的DateLib类见 packages/react-day-picker/src/classes/DateLib.ts是所有日期运算的统一入口noonSafe与timeZone同时启用时还会叠加createNoonOverrides将日历运算固定在正午以规避历史秒级偏移components通过getComponents(props.components)获取可替换的子组件集合formatters/labels日期格式化函数与 aria-label 生成函数classNames默认类名与用户classNames合并。若未传today则默认取dateLib.today()DayPicker.tsx:156。3. useCalendar月份与周的计算useCalendar(props, dateLib)packages/react-day-picker/src/useCalendar.ts负责生成日历数据由startMonth/endMonth计算导航边界navStart/navEnd计算initialMonth并交给useControlledValue维护受控/非受控月份依序调用getDisplayMonths、getDates、getMonths、getWeeks、getDays生成months、weeks、days以及previousMonth/nextMonth暴露goToMonth(date)导航并触发onMonthChange与goToDay(day)供自定义组件与键盘导航使用。4. useSelection按 mode 分发选择逻辑useSelection(props, dateLib)packages/react-day-picker/src/useSelection.ts内部同时调用useSingle、useMulti、useRange三个 hook再根据props.mode返回对应的选择对象isSelected、select、selectedswitch (props.mode) { case single: return single; case multiple: return multi; case range: return range; default: return undefined; }无mode时返回undefined此时组件退化为只读日历。三个选择 hook 分别位于 packages/react-day-picker/src/selection/ 目录。5. useFocus焦点管理与键盘导航useFocuspackages/react-day-picker/src/useFocus.ts实现 roving tabindex 模式同一时刻只有一个日期按钮tabIndex{0}其余为-1。键盘导航的键位映射直接写在 DayPicker.tsx:287按键行为无 Shift行为 ShiftArrowLeft/ArrowRight日粒度移动RTL 下方向相反月粒度移动ArrowUp/ArrowDown周粒度移动年粒度移动PageUp/PageDown月粒度移动年粒度移动Home/End跳到周首 / 周尾—6. modifiers 计算与数据属性每个日期渲染前都会通过createGetModifiers计算其修饰符集合再叠加focused、selected标志若处于range模式还会补充range_start/range_end/range_middleDayPicker.tsx:692。修饰符最终以data-*属性输出到每个日期单元格上data-day、data-selected、data-disabled、data-hidden、data-outside、data-focused、data-today、data-month方便测试与 CSS 选择器定位。渲染输出结构与组件体系DayPicker的 JSX 输出DayPicker.tsx:402被包裹在dayPickerContext.Provider中DOM 骨架如下Root ← 根容器携带 className / style / dir / lang / role / aria-* Months Nav / ← 传统布局的上一月/下一月导航可隐藏 Month ← 每个展示月 MonthCaption ← 标题区 ├─ DropdownNav ← captionLayout 含 dropdown 时MonthsDropdown / YearsDropdown └─ CaptionLabel ← 默认纯文本标题rolestatus aria-livepolite PreviousMonthButton / ← navLayoutaround 时左侧按钮 NextMonthButton / ← navLayoutaround 时右侧按钮 MonthGrid ← rolegrid Weekdays ← 星期表头行可含 WeekNumberHeader Weeks Week WeekNumber / ← showWeekNumber 时 Day ← gridcell含各>赞分享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点击查看免费下载相关推荐Got Promise API 实战GET、POST、.json() 与 .text() 让 Node.js 请求优雅 10 倍Got Promise API 实战GET、POST、.json 与 .text 让 Node.js 请求优雅 10 倍 Got 是 Node.js 生态中最UI组件前端React-Day-Picker 日期选择模式详解单日、多日与范围选择React Day Picker 日期选择模式详解单日、多日与范围选择 前言 React Day Picker 是一个功能强大的 React 日期选择组件库UI组件前端Lance 数据完整性实战fri_straddle_pre_6610 测试夹具与 FRI 跨重写组索引损坏的复现、检测与自愈Lance 数据完整性实战fri_straddle_pre_6610 测试夹具与 FRI 跨重写组索引损坏的复现、检测与自愈 导读 fri_straddle_UI组件前端上一篇深度探索SMUDebugTool如何解锁Ryzen处理器性能潜力并实现精准调优下一篇魔兽争霸3性能优化与兼容性修复WarcraftHelper 终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考