前端开发人员常常需要在项目中添加日期选择器以让用户选择日期和时间，而现在有很多日期选择器的 npm 包可以用来实现这一需求。本篇文章将介绍 @artemv/react-datepicker 这个日期选择器的 npm 包的使用方法，并以代码示例的方式讲述其中的细节和深度。
安装 @artemv/react-datepicker
首先，在终端/cmd 中使用以下命令使用 npm 安装 @artemv/react-datepicker：
npm install @artemv/react-datepicker --save
如果你使用 yarn：
yarn add @artemv/react-datepicker
在项目中导入和使用 @artemv/react-datepicker
在需要使用 @artemv/react-datepicker 的文件中，导入 @artemv/react-datepicker：
import React, { useState } from 'react';
import DatePicker from '@artemv/react-datepicker';
import '@artemv/react-datepicker/dist/styles.css';然后在组件中声明一个变量来保存当前选择的日期和时间：
function MyDatePicker() {
const [selectedDate, setSelectedDate] = useState(null);
// ...
}你还需要渲染 @artemv/react-datepicker：
<DatePicker
selected={selectedDate}
onChange={(date) => setSelectedDate(date)}
dateFormat='yyyy/MM/dd'
/>上面的 dateFormat 属性指定日期的格式，你可以根据自己的需要进行修改。
完整代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ---------------------------
------ -------------------------------------------
-------- -------------- -
----- -------------- ---------------- - ---------------
------ -
-----
-----------
-----------------------
---------------- -- ----------------------
-----------------------
--
----------- ----- ------------- - --------------------------------- - -----------
------
--
-@artemv/react-datepicker 的常用属性
selected
用于指定当前选定的日期和时间。
onChange
当日期发生变化时调用的回调函数，其参数为选定的日期和时间对象。
dateFormat
指定日期的格式。
dateFormatCalendar
指定日历视图中日期单元格的日期格式。
minDate 和 maxDate
指定限制用户选择的最小日期和最大日期。
共享状态管理
如果你需要从 @artemv/react-datepicker 中获取选定的日期，而该日期又需要在多个组件中使用，则你需要考虑使用共享状态管理的方案。一个流行的共享状态管理方案是 Redux。以下是一个使用 redux 和 react-redux 管理状态的示例代码：
安装 redux 和 react-redux
在终端/cmd 中使用以下命令使用 npm 安装 redux 和 react-redux：
npm install redux react-redux --save
如果你使用 yarn：
yarn add redux react-redux
创建 redux store
创建一个 Redux store 来保存日期和时间对象：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------------- -----
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------------
------ -
------------- ---------------
--
--------
------ ------
-
-
----- ----- - -------------------------
------ ------- ------在组件中连接 Redux Store
使用 react-redux 的 connect 函数来连接 Redux store 和组件：
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------------------- -
----- - ------------- --------------- - - ------
-- ---
-
-------- ---------------------- -
------ -
------------- -------------------
--
-
-------- ---------------------------- -
------ -
---------------- ------ -- ---------- ----- -------------------- -------- ---- ---
--
-
------ ------- ------------------------ ----------------------------------将 MyDatePicker 导出时用 connect 函数包裹起来，并传入 mapStateToProps 和 mapDispatchToProps 函数。此时，selectedDate 和 setSelectedDate 将从 Redux store 传入组件的 props。
现在你可以在你的组件中使用 selectedDate 和 setSelectedDate 变量了，如下所示：
-- -------------------- ---- -------
-------- ------------------- -
----- - ------------- --------------- - - ------
------ -
-----
-----------
-----------------------
---------------- -- ----------------------
-----------------------
--
----------- ----- ------------- - --------------------------------- - -----------
------
--
-结论
使用 @artemv/react-datepicker 很容易添加日期选择器到你的项目中，并轻松获取用户选定的日期。如果你需要在多个组件中使用该日期，你可以通过 Redux store 来实现状态共享。希望本篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7881e8991b448d8fbd