ReactJS Datepicker 多个日期选择

Question

我正在

reactJS

中制作一个表单，其中有一个来自 https://reactdatepicker.com/ 的日期选择器，我的问题是：

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

根据文档没有，或者也许我错过了一些东西？

我将不胜感激任何帮助。预先感谢。

Answer 1

那里有很多节点模块，如果您有一个不适合您的需求（我也对您提供的日期选择器进行了一些研究，看来您是正确的，它没有多个日期选择），你可以找到其他人。 这个，由airbnb开发，是一个日期范围选择器，而react-multiple-datepicker是一个可以选择多个不相关日期的选择器。

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>
  );
}

Answer 3

我最近查看了您的问题。

您可以使用

selectsStart

选项，然后使用

startDate={-your start date here-}

、

endDate={-your end date here-}

，并使用关键字

selectsEnd

结束选择。仅此而已。

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

Answer 4

您可以在Date range for one datepicker

下的

docs

中找到这样的解决方案

  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
    />
 );