介绍
React Datepicker 是一个基于 React 的日期选择器组件，用于在 Web 应用程序中选择日期。它包含许多定制选项，使其非常灵活。React Datepicker 同时支持多种主题，可以完全定制化样式。
在本篇文章中，我们将详细讲解如何使用 React Datepicker，包括安装、使用、配置等。
安装
要使用 React Datepicker，首先需要安装 npm 包：
npm install react-datepicker --save
本文使用的 React 版本为 16.0.0 或更高。
使用
安装完成后，可以在项目中使用 React Datepicker。我们来看一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
------ ---------------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- --- -------
--
----------------- - -----------------------------
-
------------------ -
---------------
---------- -----
---
-
-------- -
------ -
-----
-----------
-------------------------------
----------------------------
--
------
--
-
-
------ ------- ----上述代码引入了 DatePicker 组件，并将其作为类中的一个属性。在 handleChange() 方法中，我们使用 setState() 方法更新组件的状态，并将日期设置为新日期。
在 render() 方法中，我们返回了一个包含 DatePicker 的 div 元素。selected 属性用于指定当前输入框的日期，onChange 属性用于指定当日期变化时的回调。
引入 'react-datepicker/dist/react-datepicker.css' 可以导入默认样式，如果需要更改，可以自己编写 css 文件。DatePicker 的根元素有一个类名为 react-datepicker，样式可以根据类名来自定义。
配置
React Datepicker 提供了丰富的配置选项，我们可以通过配置来自定义组件。以下是一些常用选项：
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| selected | Date or null | 是 | 设置输入框中的日期 |
| onChange | function | 是 | 在日期变化时触发 |
| dateFormat | string 或 array | 否 | 日期格式 |
| placeholderText | string | 否 | 占位符文本 |
| todayButton | string | 否 | 显示 “今天” 按钮 |
| minDate | Date | 否 | 最小日期 |
| maxDate | Date | 否 | 最大日期 |
| showTimeSelect | bool | 否 | 是否显示时间选择器 |
| timeFormat | string | 否 | 时间格式 |
| timeIntervals | number | 否 | 时间间隔 |
以下是一个带有配置选项的 DatePicker 例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------
------ ---------------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- --- -------
--
----------------- - -----------------------------
-
------------------ -
---------------
---------- -----
---
-
-------- -
------ -
-----
-----------
-------------------------------
----------------------------
-----------------------
-----------------------
----------------
------------ -------------------
------------ -------------------
--------------
------------------
------------------
--
------
--
-
-
------ ------- ----在该例子中，我们自定义了日期格式、占位符、最小/大日期、时间选择器等属性。
总结
React Datepicker 是一个方便易用的日期选择器，提供丰富的配置选项，可以轻松满足不同的需求。本文中，我们学习了 React Datepicker 的安装、使用和配置方法，并提供了相关示例代码。希望本文能够帮助读者更好地理解和使用 React Datepicker。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728281e8991b448e8b64