在前端开发领域，很多时候需要使用日期选择器这样的插件来协助开发工作，而@signavio/react-day-picker是一款非常实用的React日期选择器组件，本文将详细介绍该组件的使用方法。
安装
@signavio/react-day-picker可以通过npm来安装，如下所示：
npm install @signavio/react-day-picker --save
用法
引入
在代码中引入DayPicker:
import DayPicker from '@signavio/react-day-picker' import '@signavio/react-day-picker/lib/style.css'
基本用法
要使用DayPicker，您需要在组件中进行一些配置。 最简单的配置如下：
<DayPicker onDayClick={day => console.log(day)} />这将创建一个日期选择器，您可以单击日期并将其发送到浏览器的控制台。
显示日期范围
您可以指定要显示的日期范围：
<DayPicker
fromMonth={new Date(2021, 0)}
toMonth={new Date(2021, 5)}
onDayClick={day => console.log(day)}
/>fromMonth和toMonth分别是一个Date对象，表示所需的日期范围。 此示例将在2021年1月1日至2021年5月31日之间显示可选择的日期。
初始选定日期
要在DayPicker上选择初始日期，请在组件的initialMonth prop中提供一个日期：
<DayPicker
initialMonth={new Date(2021, 4)}
onDayClick={day => console.log(day)}
/>这将在日历中选择2021年5月的月份。
自定义禁用日期
禁用特定日期，您可以传递禁用规则作为propTypes的对象（这是你们应该在你的组件之外定义它。）
const disabledDays = {
daysOfWeek: [0, 6],
before: new Date(2021, 0, 1),
after: new Date(2021, 5, 31),
}
<DayPicker disabledDays={disabledDays} />这将禁用每周的星期日和星期六以及2021年1月1日至2021年5月31日之外的所有日期。
自定义Locale
DayPicker默认使用英语作为语言。 要更改它，只需指定一个名为locale的prop即可。
-- -------------------- ---- -------
------ --------- ---- ----------------------------
------ ------------------------------------------
------ ---------------- ---- --------------------
--- ------- - --- ------------------
--- -
------- -
---------
----------
-------
--------
------
-------
-------
---------
------------
----------
-----------
-----------
--
-------------- ------ ----- ----- ----- ----- ----- ------
------------- -
----------
---------
-----------
-----------
-------------
----------
----------
--
--
--
---------- ------------------- --这将在日历上使用德语。 您需要从React Localized中导入LocalizedStrings，以定义在日历中使用的语言。
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ----------------------------
------ ------------------------------------------
------ ---------------- ---- --------------------
--- ------- - --- ------------------
--- -
------- -
---------
----------
-------
--------
------
-------
-------
---------
------------
----------
-----------
-----------
--
-------------- ------ ----- ----- ----- ----- ----- ------
------------- -
----------
---------
-----------
-----------
-------------
----------
----------
--
--
--- -
------- -
----------
-----------
--------
--------
------
-------
-------
---------
------------
----------
-----------
-----------
--
-------------- ------ ----- ----- ----- ----- ----- ------
------------- -
---------
---------
----------
------------
-----------
---------
-----------
--
--
--
----- ------------ - -
----------- --- ---
------- --- ---------- -- ---
------ --- ---------- -- ----
-
------ ------- -------- ----- -
------ -
-----
------- ------ ------------
----------
-------------------
----------------- ---------- ---
-------------- ---------- ---
------------ ---------- ---
---------------------------
----------------- -- -----------------
--
------
-
-结论
@signavio/react-day-picker是一款强大实用的React日期选择器组件，可以为前端开发者提供很好的支持。我们希望这个教程能够帮助您更好的掌握DayPicker的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc081e8991b448da5c3