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点击查看免费下载faIR是daypicker/persian包导出的波斯语伊朗贾拉利Jalali历区域设置常量它负责为 react-day-picker 提供完整的波斯语界面标签Farsi labels、从右到左RTL的排版方向以及东部阿拉伯-印度Eastern Arabic-Indic数字系统。本文将以 apps/website/docs/api/persian/variables/faIR.md 的 API 定义为骨架结合packages/persian包的源码实现与测试用例说明faIR的构成、默认行为、使用方式及其背后的日期库机制帮助你直接在项目里搭建符合波斯用户习惯的日期选择器。faIR是什么一个区域设置常量根据 API 文档 faIR.md 的定义constfaIR:typeoffaIRJalalifaIRJalaliDefined in: packages/persian/src/index.tsx:15Persian (Iran) Jalali locale with DayPicker labels.也就是说faIR是一个const常量类型是typeof faIRJalali值就是faIRJalali本身它定义在 packages/persian/src/index.tsx 的第 15 行它是为Jalali波斯/伊朗历法设计的区域设置并额外携带 DayPicker 专用的界面翻译标签labels。从源码 packages/persian/src/index.tsx:14-18 可以看到faIR与同包其他区域设置常量的关系/** Persian (Iran) Jalali locale with DayPicker labels. */ export const faIR: typeof faIRJalali faIRJalali; /** English (US) Jalali locale with DayPicker labels. */ export const enUS: typeof enUSJalali enUSJalali; export { enUSJalali, faIRJalali };faIR本质上是对 faIRJalali 的具名导出named re-export。二者在类型上是等价的typeof faIRJalalifaIR是更短、更贴近波斯语使用者习惯的别名。daypicker/persian包一共导出了 4 个区域设置相关常量faIR、faIRJalali、enUS、enUSJalali完整清单见 apps/website/docs/api/persian/index.md。faIR背后的实现faIRJalali区域设置对象faIRJalali定义在 packages/persian/src/locale/fa-IR-jalali.ts:12类型为DayPickerLocale。它的结构是典型的“基础区域设置 DayPicker 标签覆盖”组合import * as dateFnsJalali from date-fns-jalali; import { faIR as jalaliFaIR } from date-fns-jalali/locale; import { DateLib } from ../classes/DateLib.js; import type { DayPickerLocale, DateLibOptions, Modifiers } from ../classes/DateLib.js; export const faIRJalali: DayPickerLocale { ...jalaliFaIR, // 展开 date-fns-jalali 的 faIR获得月份、星期等基础历法数据 labels: { /* DayPicker 专用标签覆盖见下表 */ }, };它先通过展开运算符继承date-fns-jalali/locale中的faIR提供波斯语月份名、星期名等历法基础数据再覆盖labels字段为 DayPicker 的各个交互元素提供波斯语翻译。下表整理了 fa-IR-jalali.ts 中所有标签及其含义标签键值波斯语中文含义作用对象labelDayButton函数lib.format(date, PPPP)今天加前缀امروز选中加后缀، انتخاب شده完整日期今天……已选择每个日期按钮的无障碍名称labelMonthDropdownماه را انتخاب کنید请选择月份月份下拉框labelNextرفتن به ماه بعد转到下个月下一个导航按钮labelPreviousرفتن به ماه قبل转到上个月上一个导航按钮labelWeekNumberهفته ${weekNumber}第 N 周周数单元格labelYearDropdownسال را انتخاب کنید请选择年份年份下拉框labelGridformatMonthYear(date)网格的月份-年份标题日历网格区域labelGridcell同labelDayButton含今天前缀单元格无障碍名称网格单元格labelNavنوار ناوبری导航栏导航区域labelWeekNumberHeaderشماره هفته周数周数列表头labelWeekdaylib.format(date, cccc)完整星期名星期表头其中labelDayButton和labelGridcell是函数形式接收(date, modifiers, options, dateLib)四个参数通过lib.format(date, PPPP)输出完整格式化日期并根据modifiers.today今天与modifiers.selected选中动态拼装前缀/后缀。例如选中今天时无障碍标签会变成类似 “امروز، ۱۲ مهر ۱۴۰۳، انتخاب شده” 的完整描述。DayPicker默认行为faIR何时被自动使用daypicker/persian导出的DayPicker组件见 apps/website/docs/api/persian/functions/DayPicker.md为波斯日历预设了四组默认值其中第一项就是faIRlocale默认faIRdir默认rtl从右到左排版dateLib默认date-fns-jalali的jalaliDateLibnumerals默认arabext东部阿拉伯-印度数字即波斯文数字 ۰۱۲۳۴۵۶۷۸۹。对应源码见 packages/persian/src/index.tsx:33-113其中关键片段const locale localeProp ?? faIR; return ( DayPickerComponent {...restProps} locale{locale} numerals{numerals ?? arabext} dir{dir ?? rtl} dateLib{dateLib} formatters{{ formatWeekdayName: (date, _options, lib) { const activeLib lib ?? dateLib; const isPersian activeLib.options.locale?.code?.startsWith(fa); return activeLib.format(date, isPersian ? ccccc : cccccc); }, ...props.formatters, }} / );值得注意的细节是formatWeekdayName格式化器它会检查当前区域设置代码是否以fa开头波斯语时用ccccc单字母星期缩写否则用cccccc双字母缩写避免单字母缩写对某些语言失去区分度。因此即使不显式传入locale{faIR}只要使用daypicker/persian的DayPickerfaIR就会作为默认区域设置生效。使用faIR渲染波斯日历两种典型场景场景一波斯语标签 波斯文数字默认安装依赖参考 apps/website/docs/localization/persian.mdx 的安装说明npm install daypicker/react daypicker/persian随后从daypicker/persian导入DayPicker和faIRimport { DayPicker, faIR } from daypicker/persian; DayPicker locale{faIR} /;即使省略locale属性DayPicker也会默认使用faIR见 examples/Persian.tsx其完整实现仅一行DayPicker modesingle /。渲染结果默认具备波斯语月份标题如“آذر ۱۴۰۳”即公历 2024 年 12 月对应的 1403 年 9 月dirrtl从右到左排版波斯文数字۱۴۰۳ 而非 1403上述波斯语无障碍标签。场景二英文标签 拉丁数字LTR如果目标用户更习惯英文界面可以组合enUS、dirltr与numeralslatnimport { DayPicker, enUS } from daypicker/persian; DayPicker locale{enUS} dirltr numeralslatn /;对应的完整示例见 examples/PersianEn.tsx它额外启用了showWeekNumber和showOutsideDays。numerals属性支持多种数字系统详见 packages/persian/src/index.tsx:52-72 的类型注释latn拉丁数字、arab阿拉伯-印度数字、arabext东部阿拉伯-印度数字默认值、deva天城文、beng孟加拉文等按需传入即可。这些行为都有测试用例背书见 packages/persian/src/index.test.tsxtest(renders Persian month caption and RTL direction by default, () { const { container } render(DayPicker month{new Date(2024, 11, 1)} /); expect(grid(آذر ۱۴۰۳)).toBeInTheDocument(); expect(container.firstElementChild).toHaveAttribute(dir, rtl); });faIR与日期库getDateLib、时区与noonSafefaIR只负责“说什么语言”而“按什么历法计算日期”由getDateLib返回的日期库决定参见 apps/website/docs/api/persian/functions/getDateLib.md。实现位于 packages/persian/src/index.tsx:122-140export const getDateLib (options?: DateLibOptions { noonSafe?: boolean; overrides?: DayPickerProps[dateLib]; }) { const { noonSafe, overrides, ...dateLibOptions } options ?? {}; const baseOverrides noonSafe dateLibOptions.timeZone ? { ...dateFnsJalali, ...createJalaliNoonOverrides(dateLibOptions.timeZone, {...}) } : dateFnsJalali; return new DateLib(dateLibOptions, { ...baseOverrides, ...overrides }); };几个要点日期计算默认基于date-fns-jalali的完整 API如format、addMonths、startOfMonth等消费者可以通过overrides传入自定义方法覆盖优先级高于波斯历默认实现测试 packages/persian/src/index.test.tsx#L28-L37 验证了这一点开启noonSafe且指定timeZone时会额外叠加createJalaliNoonOverrides用于在历史时区偏移如Asia/Dubai、Asia/Saigon、Asia/Tehran下保证整周渲染完整、避免月份下拉重复——相关回归测试见 examples/PersianNoonSafe.test.tsx 与 packages/persian/src/index.test.tsx#L61-L81典型的组合用法波斯日历 指定时区 中午安全模式import { DayPicker } from daypicker/persian; DayPicker fixedWeeks showOutsideDays noonSafe timeZoneAsia/Tehran defaultMonth{new Date(1900, 11, 1)} /;小结faIR是daypicker/persian对faIRJalali的具名导出类型为typeof faIRJalali定义于 packages/persian/src/index.tsx:15它是波斯语伊朗贾拉利历区域设置在继承date-fns-jalali的faIR基础上覆盖了 DayPicker 的 11 类无障碍与导航标签fa-IR-jalali.tsdaypicker/persian的DayPicker默认即使用faIRdirrtlnumeralsarabextdate-fns-jalali日期库也可通过enUS、dirltr、numeralslatn切换为英文/拉丁风格需要精细控制日期计算时可通过getDateLib传入overrides或结合noonSafe与timeZone处理历史时区边界问题包版本与依赖信息可查阅 packages/persian/package.json相关 API 总览见 apps/website/docs/api/persian/index.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点击查看免费下载相关推荐如何支持阿拉伯语/希伯来语从右到左布局Bootswatch的rtlcss双向主题构建揭秘如何支持阿拉伯语/希伯来语从右到左布局Bootswatch的rtlcss双向主题构建揭秘 如果你正在做面向中东或多语言市场的前端项目一定会遇到一个问题如何UI组件前端Lance 数据完整性实战fri_straddle_pre_6610 测试夹具与 FRI 跨重写组索引损坏的复现、检测与自愈Lance 数据完整性实战fri_straddle_pre_6610 测试夹具与 FRI 跨重写组索引损坏的复现、检测与自愈 导读 fri_straddle_UI组件前端深入理解gpbl/react-day-picker项目贡献指南深入理解gpbl/react day picker项目贡献指南 引言为什么选择贡献DayPicker React DayPicker是一个功能强大、高度可定UI组件前端上一篇163MusicLyrics三步解决音乐歌词获取难题的智能工具下一篇一次性把米家设备接入 Home Assistant小米米家集成完整新手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考