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/hijri是 React DayPicker 官方推出的希吉来历伊斯兰历扩展包它让 DayPicker 以Umm al-Qura 历法的月份与年份逻辑渲染日历默认采用沙特阿拉伯阿拉伯语 localear-SA、阿拉伯-印度数字Arabic-Indic numerals与从右到左RTL的排版方向。本文以仓库中的 packages/hijri/README.md 为骨架结合 packages/hijri 包内源码与测试完整讲解该包的安装、快速使用、默认行为、日期转换范围、自定义dateLib与格式化细节帮助你为 Web 应用快速接入符合伊斯兰历法的日期选择器。包定位给 DayPicker 加上伊斯兰历法DayPicker 本身基于公历Gregorian渲染而daypicker/hijri通过替换 DayPicker 内部的日期库dateLib与默认 locale将整个日历切换到 Umm al-Qura 希吉来历。包描述与 README 均明确指出见 packages/hijri/package.jsonHijri calendar support for react-day-picker其核心特征来自 packages/hijri/README.md使用Umm al-Qura 历法islamic-umalqura的月份与年份逻辑默认 locale 为ar-SA沙特阿拉伯阿拉伯语默认数字系统为阿拉伯-印度数字arab默认文档方向为从右到左rtl。这意味着你无需改动业务代码中的日期选择逻辑只需替换导入来源即可获得一整套希吉来历日历界面。安装README 给出的安装命令是一次性安装主包与希吉来历扩展包npm install daypicker/react daypicker/hijri从 packages/hijri/package.json 可以看到daypicker/hijri声明了如下依赖与同行依赖dependenciesdaypicker/react当前仓库中为10.0.1、tabby_ai/hijri-converter1.0.5负责公历与希吉来历互转、date-fns^4.1.0peerDependenciesreact 16.8.0types/react 16.8.0可选。也就是说Hijri 包是建立在daypicker/react之上的日历逻辑注入层本身不重复实现 UI 组件。快速开始README 给出的最小可用示例非常简洁import { DayPicker } from daypicker/hijri; import daypicker/react/style.css; export function HijriCalendar() { return DayPicker modesingle /; }两点值得注意必须引入主包样式daypicker/react/style.css负责日历的基础布局与主题样式Hijri 包本身不携带样式文件导入来源是daypicker/hijriDayPicker组件从该包直接导出而不是从daypicker/react这是切换到希吉来历的关键。仓库中的示例应用可以直接对照查看例如 examples/Hijri.tsx默认希吉来历渲染与 examples/HijriEn.tsx英文 locale 下的希吉来历渲染以及对应的测试 examples/HijriEn.test.tsx。默认行为开箱即用的沙特阿拉伯历法Hijri 包的入口实现 明确给出了以下默认值属性默认值说明localear-SA沙特阿拉伯阿拉伯语 localedirrtl从右到左排版numeralsarab阿拉伯-印度数字如 ١٤٤٦startMonth1924-08-01公历支持转换的最早月份endMonth2077-11-16公历支持转换的最晚月份源码片段packages/hijri/src/hijri/index.tsx中这些默认值通过以下代码注入return ( DayPickerComponent {...clampedProps} locale{props.locale ?? arSA} numerals{props.numerals ?? arab} dir{props.dir ?? rtl} dateLib{{ ...hijriDateLib, ...dateLibProp }} / );因此直接渲染DayPicker modesingle /时日历标题会显示阿拉伯语希吉来历月份名与阿拉伯-印度数字。测试用例packages/hijri/src/hijri/index.test.tsx对此有直接验证将测试时间固定为公历 2025 年 3 月 8 日对应希吉来历 1446 年斋月 8 日后断言网格标题为رمضان ١٤٤٦Ramadan 1446 的阿拉伯语形式。支持的公历-希吉来历转换范围Umm al-Qura 历法的公历互转并非任意日期都有效Hijri 包在 packages/hijri/src/hijri/utils/range.ts 中定义了严格的转换边界希吉来历范围1343 年 1 月 1 日 至 1500 年 12 月 30 日源码中HIJRI_MIN/HIJRI_MAX对应的公历范围1924-08-01 至 2077-11-16源码中GREGORIAN_MIN/GREGORIAN_MAX。这是由底层转换库tabby_ai/hijri-converter的能力决定的。为防范运行时转换错误入口组件会对所有日期相关属性month、defaultMonth、today、startMonth、endMonth执行clamp钳制超出下限的日期被钳制到1924-08-01超出上限的日期被钳制到2077-11-16未显式传入startMonth/endMonth时导航边界自动锁定为转换范围的两端。这在 packages/hijri/src/hijri/index.tsx 的clampDateProp与clampedProps构建逻辑中实现clampGregorianDate的具体实现位于 packages/hijri/src/hijri/utils/range.ts约 L65-L74。测试对此有完整覆盖packages/hijri/src/hijri/index.test.tsx传入公历1900-01-01不会抛错且上一月导航按钮呈现aria-disabledtrue传入公历2100-01-01不会抛错且下一月导航按钮被禁用显式传入超范围的startMonth/endMonth同样会被钳制并反映在导航边界上。底层实现日期转换与月度运算Hijri 包用一套完整的日期库覆写来接管 DayPicker 的日历运算。这些函数集中在 packages/hijri/src/hijri/lib/index.ts共导出 17 个与 date-fns 同构的方法月份运算addMonths、setMonth、getMonth、startOfMonth、endOfMonth、isSameMonth、eachMonthOfInterval、differenceInCalendarMonths年份运算addYears、setYear、getYear、startOfYear、endOfYear、isSameYear、eachYearOfInterval日期构造与格式化newDate、format。它们统一以toHijriDate/toGregorianDate两个双向转换函数为地基packages/hijri/src/hijri/utils/conversion.tstoHijriDate(date)先把公历日期钳制到支持范围再用gregorianToHijri转换并将底层 1 起始的月份转为 0 起始的monthIndextoGregorianDate(hijri)调用hijriToGregorian前先对日期做钳制并对只有 29 天的月份采用从当月天数逐日向下探测的策略避免非法月/日组合抛异常若全部探测失败则回退到支持范围的最小公历日期。内部统一使用HijriDate结构packages/hijri/src/hijri/utils/types.tstype HijriDate { year: number; monthIndex: number; // 0 起始 day: number; };基于此addMonths的实现packages/hijri/src/hijri/lib/addMonths.ts就是先转希吉来历、再对 monthIndex 加减、最后转回公历而setMonthpackages/hijri/src/hijri/lib/setMonth.ts还会处理月份溢位如monthIndex 13会被折算为下一年二月以及目标月只有 29 天时的天数收敛。getDaysInMonthpackages/hijri/src/hijri/utils/daysInMonth.ts则从 30 天向下探测到 29 天并用往返转换校验确认天数真实有效。这些细节保证了跨越希吉来历月份的导航、区间选择、年月下拉等 DayPicker 高级功能都能在伊斯兰历下正确工作。自定义 dateLib在默认之上叠加覆盖除了默认的希吉来历逻辑入口组件还允许你通过dateLib属性注入自定义覆盖且覆盖优先级高于内置实现DayPicker dateLib{{ format: () custom caption }} /这正是 packages/hijri/src/hijri/index.tsx 中dateLib{{ ...hijriDateLib, ...dateLibProp }}的展开顺序决定的先铺入 17 个 Hijri 方法再以用户传入的属性覆盖同名方法。测试 packages/hijri/src/hijri/index.test.tsx 的第一个用例即验证了覆盖发生在 Hijri 默认之后。此外包还导出一个独立的工具函数export const getDateLib (options?: DateLibOptions) { return new DateLib(options, hijriDateLib); };它基于daypicker/react的DateLib类以 Hijri 函数库为覆写集构造一个独立的日期库实例类型定义见 packages/hijri/src/classes/DateLib.ts适合在需要脱离组件、单独执行希吉来历日期运算的场景中使用。本地化与格式化细节Hijri 包从 packages/hijri/src/locale/ar-SA.ts 与 packages/hijri/src/locale/en-US.ts 导出arSA与enUS两个 locale并在入口index.tsx中一并导出方便按需切换import { DayPicker, enUS } from daypicker/hijri; DayPicker locale{enUS} dirltr numeralslatn /;对应测试验证了切换后的效果locale{enUS} dirltr numeralslatn时网格标题显示Ramadan 1446日期格子显示拉丁数字8仅设置numeralslatn保持 ar-SA 语言时标题为رمضان 1446。在格式化层面packages/hijri/src/hijri/lib/format.ts 重写了format方法核心策略是优先使用Intl.DateTimeFormat并显式传入calendar: islamic-umalqura以浏览器 ICU 数据直接产出 Umm al-Qura 历法的月份名、星期名与日期样式若运行环境不支持该历法则回退到内置的 fallbackLocaleData.ts 静态表阿拉伯语/英语双份的 12 个月名与 7 个星期名保证任何环境都不至于空白。format支持 date-fns 风格的常用 token包括yyyy/y年份、MM/M月份、dd/d日、yyyy-MM-ddISO 形式、LLLL y如Ramadan 1446、LLLL/LLL月名长/短格式、PPPP/PPP/PP/P完整/长/中/短日期样式、cccc/ccc/ccccc星期名长/短/窄格式以及包含H/h与m的时间格式。对超出转换范围的日期格式化逻辑会退化为显示公历成分避免崩溃。文档与示例仓库内自带的官方文档位于 apps/website/docs/localization/hijri.mdx希吉来历专项指南与 React DayPicker 主文档同处 apps/website/docs 目录可作为进一步阅读入口同时 examples/Hijri.tsx 与 examples/HijriEn.tsx 提供了可直接运行的仓库内示例。Licensedaypicker/hijri以 MIT 协议发布许可文本见 packages/hijri/LICENSEREADME 末尾亦注明 MIT. See LICENSE。赞分享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/hijri 使用指南在 React DayPicker 中渲染 Umm al-Qura 伊斯兰历日历daypicker/hijri 使用指南在 React DayPicker 中渲染 Umm al Qura 伊斯兰历日历 daypicker/hijriUI组件前端react-day-picker 的 daypicker/hijri 包DayPicker() 函数实现 Umm al-Qura 伊斯兰日历react day picker 的 daypicker/hijri 包DayPicker 函数实现 Umm al Qura 伊斯兰日历 导读 本文围绕 UI组件前端daypicker/hijri 的英文美国区域设置 enUS 解析拉丁数字下的 Umm al-Qura 日历daypicker/hijri 的英文美国区域设置 enUS 解析拉丁数字下的 Umm al Qura 日历 enUS 是 daypicker/hijUI组件前端上一篇OpenGPTs 前端工程化指南基于 React TypeScript Vite 的构建配置与 ESLint 类型感知规则实践下一篇OpenViking 狼人杀 Demo7 个 Agent 的串行消息路由、真人混局与局末归档完整拆解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考