ReactJS日期选择器多日期选择

Question

我正在使用 reactJS 制作一个表单，其中包含一个从https://reactdatepicker.com/获取的日期选择器。我的问题是：

是否有选项可以在一个日期选择器中选择多个日期？

根据文档，好像没有这样的选项，或者我可能错过了什么？

非常感谢你的帮助。提前致谢。

- JustJSFan

---

您可以尝试使用highlightedDates进行操作。通过onChange事件添加和删除日期，并根据需求样式化日历。这比添加另一个日期选择器包要容易得多。 - nonybrighto

Answer 1

有许多node模块可供选择，如果您使用的模块不符合您的需求（我还查看了您提供的日期选择器，看起来您正确，它确实没有多个日期选择功能），您可以找到其他模块。 这个由airbnb制作，是一个日期范围选择器，而react-multiple-datepicker是一个可以选择多个无关日期的选择器。

- Blake Steel

Answer 2

我知道这个问题已经有一段时间了，但是我需要这个精确的功能，如果有帮助，我找到了一个简单的解决方法：

export function DemoDatePicker() {
 // range demo
 const [startDate, setStartDate] = useState(null);
 const [endDate, setEndDate] = useState(null);

 function handleDateChange(date) {
    // initial change: start by setting the startDate
    if (!startDate && !endDate) {
      setStartDate(date);
     // startDate has been set, set the end date
    } else if (startDate && !endDate) {
     setEndDate(date);
    }

    // user is choosing another range => set the start date
    // and set the endDate back to null
    if (startDate && endDate) {
      setStartDate(date);
      setEndDate(null);
    }
 }

  return (
    <div>
      <DatePicker
        onChange={(date) => handleDateChange(date)}
        selectsStart={true}
        selected={startDate}
        startDate={startDate}
        endDate={endDate}
        inline={true}
      />
    </div>
  );
}

- t3__rry

Answer 3

我最近查看了你的问题。

你可以使用 selectsStart 选项，接着使用 startDate={-在此处输入开始日期-} 和 endDate={-在此处输入结束日期-}，最后使用关键字 selectsEnd 结束你的选择。就这样。

    <DatePicker
      selectsStart
      startDate={startDate}
      endDate={endDate}
      selectsEnd
      inline
    />

- Ashraf Amer