如何正确使用react-datepicker <DatePicker />

要正确使用 react-datepicker <DatePicker />，您需要按照以下步骤操作：

1. 首先，确保您已安装了 react-datepicker。如果尚未安装，可以使用以下命令： npm install react-datepicker --save 或 yarn add react-datepicker
2. 下载并引入日历样式表。对于 React 16 和更高的版本，您可以在节点模块的 react-datepicker/dist 文件夹中找到 CSS 文件。将它引入到您的项目中，例如： import 'react-datepicker/dist/react-datepicker.css';
3. 根据需要设置 state。在组件中，您需要设置一个状态来保存日期值，如下所示： import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; function App() { const [startDate, setStartDate] = useState(new Date()); // ... 其他代码 }
4. 在 JSX 中使用 <DatePicker />。在组件内部，您可以像这样使用 <DatePicker /> 标签： return ( <div className="App"> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> </div> ); selected 属性将设置日期选择器的当前值。onChange 属性用于处理用户选择的新日期。在这个例子中，我们也将更新 startDate 状态。
5. 根据需要自定义日期选择器。<DatePicker /> 组件提供了许多自定义选项，例如：
   • startDate 和 endDate：设置可选日期的范围。
   • minDate 和 maxDate：设置允许的最小和最大日期。
   • selectsRange：允许多选日期。
   • inline：是否将日期选择器作为内联元素显示。
   • locale：用于设置日期格式和语言。

   您可以在 react-datepicker 文档 中找到所有可用选项。

下面是一个完整的示例：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        placeholderText="Select a date"
        dateFormat="yyyy/MM/dd"
        minDate={new Date()}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={15}
      />
    </div>
  );
}

export default App;

现在您已经知道如何正确使用 <DatePicker /> 组件。根据需要调整属性和样式，为您的项目定制日期选择器。