使用 React 的附带的 DatePicker 组件 NPM 包

React 的 DatePicker 组件是一个适用于从应用程序中选择日期的 JavaScript 库。它提供了一个简单易用的界面，可以使用户选择具有格式的日期范围。

安装

要使用 React 的 DatePicker 组件，您需要安装 react-datepicker npm 包。在命令行中输入以下命令即可：

npm install --save react-datepicker

导入

安装完成后，您需要在项目中导入 react-datepicker 包。在您的 React 代码中将其导入的方式如下：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';

使用

DatePicker 组件使用起来非常简单。以下是一个基本的示例，演示如何使用它：

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  return (
    <div>
      <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
      <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} />
    </div>
  );
};

在这个示例中，我们使用 useState 钩子来保存 startDate 和 endDate 日期数据。我们创建两个不同的 DatePicker 组件 - 一个用来选择开始日期，另一个用来选择结束日期。这两个组件可以简单地通过传递 selected 和 onChange 属性来控制。

配置

DatePicker 组件的配置有许多选项可供您自定义。以下是一些可用的常用属性：

• selected：日期选择的默认值
• onChange：当日期变更时被调用的回调函数
• startDate：选择日期范围的起始日期
• endDate：选择日期范围的结束日期
• minDate：可以选择的最小日期
• maxDate：可以选择的最大日期
• dateFormat：显示日期格式的字符串

结论

React 的 DatePicker 组件是一个功能丰富、易于使用的 JavaScript 库。它提供了许多配置选项，使您能够自定义日期选择器的行为和外观。如果您需要在您的 React 应用程序中选择日期，那么 react-datepicker 就是您的最佳选择。