@vespaiach/react-datepicker 是一个基于 React 开发的日期选择器组件，具有丰富的功能和易用性。本文将介绍如何使用 @vespaiach/react-datepicker 组件。
安装
首先，我们需要安装 @vespaiach/react-datepicker 组件。可以通过 npm 安装：
npm install @vespaiach/react-datepicker --save
或者使用 yarn：
yarn add @vespaiach/react-datepicker
使用
使用 @vespaiach/react-datepicker 组件非常简单。只需要按照以下步骤即可。
引入组件
在需要用到 @vespaiach/react-datepicker 组件的页面中，我们需要先引入组件。
import ReactDatePicker from '@vespaiach/react-datepicker'; import '@vespaiach/react-datepicker/dist/react-datepicker.css';
使用组件
接下来，我们需要在需要用到日期选择器的地方使用 <ReactDatePicker /> 组件。
<ReactDatePicker />
配置组件
@vespaiach/react-datepicker 组件提供了多种不同的配置项，让我们可以自定义组件的行为。以下是一些常见的配置项：
selected
selected 配置项用于指定当前选中的日期。可以是 JavaScript 的 Date 对象，也可以是日期字符串。
<ReactDatePicker selected={new Date()} />onChange
onChange 配置项用于注册一个回调函数，当用户修改日期选择器的值时会自动触发。
function handleDateChange(date) {
console.log('Selected date:', date);
}
<ReactDatePicker onChange={handleDateChange} />dateFormat
dateFormat 配置项用于指定日期格式。默认为 MM/dd/yyyy。
<ReactDatePicker dateFormat="yyyy/MM/dd" />
showYearDropdown
showYearDropdown 配置项用于将年份选择器以下拉列表的形式展示。
<ReactDatePicker showYearDropdown />
minDate 和 maxDate
minDate 和 maxDate 配置项用于指定最小和最大可选日期。可以是 JavaScript 的 Date 对象，也可以是日期字符串。
<ReactDatePicker minDate={new Date('2021-01-01')} maxDate={new Date('2021-12-31')} />inline
inline 配置项用于将日期选择器以行内元素的形式展示。
<ReactDatePicker inline />
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- ------------------------------
------ --------------------------------------------------------
-------- ---------------- -
----- -------------- ---------------- - ------------ --------
-------- ---------------------- -
----------------------
-
------ -
-----
----------- ----- ---------------------------------
----------------
-----------------------
---------------------------
-----------------------
----------------
------------ -------------------
------------ -------------------
------
--
------
--
-
------ ------- ---------------总结
通过本文，我们学习了使用 @vespaiach/react-datepicker 组件的基本步骤和常见配置项。希望能够帮助你更好地使用该组件。同时，也欢迎你对该组件进行探究和改进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e5974