简介
@thg303/react-persian-datepicker 是一款 React 组件，用于创建波斯语日期选择器。它基于 react-datepicker 和波斯历，提供了易用且友好的 UI，支持自定义样式等功能。
安装
在您的项目目录下使用 npm 或 yarn 安装 @thg303/react-persian-datepicker：
npm install @thg303/react-persian-datepicker # 或 yarn add @thg303/react-persian-datepicker
使用
在您的 React 组件中导入并使用 @thg303/react-persian-datepicker：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------------- ---- -----------------------------------
----- ----------- - -- -- -
----- -------------- ---------------- - ---------------
----- ---------------- - ------ -- -
----------------------
--
------ -
-----
-------------
------------------
-----------------------
---------------------------
--
------
--
-
------ ------- ------------Props
@thg303/react-persian-datepicker 接受一些 props 来配置其行为和外观。
selected
- 类型: Date | null
- 默认值: null
选择器当前所选日期。
onChange
- 类型: function
- 默认值: null
当用户选择日期时，将被调用。
function(selectedDate: Date, event: SyntheticEvent) => void
minDate
- 类型: Date
- 默认值: null
允许选择器选择的最小日期。
maxDate
- 类型: Date
- 默认值: null
允许选择器选择的最大日期。
disabled
- 类型: boolean
- 默认值: false
禁用选择器。
className
- 类型: string
- 默认值: ''
自定义选择器容器的 class 名称。
style
- 类型: object
- 默认值: {}
自定义选择器容器的样式。
dateFormat
- 类型: string
- 默认值: 'jYYYY/jMM/jDD'
日期格式。
jYYYY- 年份 as 4 位数字的波斯历年。jYY- 年份 as 2 位数字的波斯历年。jM- 月份 as 1-2 位数字的波斯历月份。jMM- 月份 as 2 位数字的波斯历月份。jD- 日 as 1-2 位数字的波斯历日。jDD- 日 as 2 位数字的波斯历日。dddd- 完整波斯历星期几的名称。
例如，'jYYYY/jMM/jDD dddd' 将显示 "1399/07/25 چهارشنبه"。
monthLabelText
- 类型: string
- 默认值: 'ماه'
月份标签的文本。
nextMonthButtonLabel
- 类型: string
- 默认值: 'ماه بعد'
下个月按钮的文本。
previousMonthButtonLabel
- 类型: string
- 默认值: 'ماه قبل'
上个月按钮的文本。
todayButtonLabel
- 类型: string
- 默认值: 'امروز'
今天按钮的文本。
customInput
- 类型: JSX.Element
- 默认值: null
自定义输入。
例如：
<PersianDatePicker
customInput={<MyCustomInput />}
/>customInputIcon
- 类型: JSX.Element
- 默认值: null
自定义输入框旁边的图标。
例如：
<PersianDatePicker
customInputIcon={<MyCustomIcon />}
/>showMonthDropdown
- 类型: boolean
- 默认值: false
显示月份下拉菜单。
showYearDropdown
- 类型: boolean
- 默认值: false
显示年份下拉菜单。
dateFormatCalendar
- 类型: string
- 默认值: 'jMMMM jYYYY'
日期格式 (在选择器下拉菜单中)。
yearDropdownItemNumber
- 类型: number
- 默认值: 10
年份下拉菜单中显示的年数。
scrollableYearDropdown
- 类型: boolean
- 默认值: false
年份下拉菜单是否可滚动。
todayHighlight
- 类型: boolean
- 默认值: false
高亮显示今天所在的日期。
highlightDates
- 类型: Array<Date>
- 默认值: []
需要高亮显示的日期数组。
selectedDateModifier
- 类型: function
- 默认值: null
自定义选择器中选定日期的修改器函数。
function(date: Date) => Date
例如，以下的 modifier 会返回选定日期不在周末的最后一个工作日（星期五）：
-- -------------------- ---- -------
------------------
---------------------------- -- -
----- --------- - --------------
-- ---------- --- - -- --------- --- -- -
------ ------------- --------- --- - - -- - ---
-
------ -----
--
--customPreviousIcon
- 类型: JSX.Element
- 默认值: null
自定义上个月按钮的图标。
例如：
<PersianDatePicker
customPreviousIcon={<MyCustomIcon />}
/>customNextIcon
- 类型: JSX.Element
- 默认值: null
自定义下个月按钮的图标。
例如：
<PersianDatePicker
customNextIcon={<MyCustomIcon />}
/>例子
以下是一个完整的例子。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------------- ---- -----------------------------------
------ ------------
----- --- - -- -- -
----- -------------- ---------------- - ---------------
----- ---------------- - ------ -- -
----------------------
--
------ -
---- ----------------
-------------
------------------
-----------------------
---------------------------
--------------------------
-----------------
----------------
---------------------------
--------------
-------------------- ------- --- --------------------
--
------
--
-
------ ------- ----结论
@thg303/react-persian-datepicker 提供了创建波斯语日期选择器的易用且友好的 UI，支持自定义样式等功能。希望这篇文章帮助您快速上手使用此组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de112