ReactJS Datepicker 多个日期选择答案

【问题标题】：ReactJS Datepicker multiple dates selectionReactJS Datepicker 多个日期选择
【发布时间】：2018-11-15 06:00:21
【问题描述】：

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

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

根据文档，没有或者我错过了什么？

如果有任何帮助，我将不胜感激。提前致谢。

【问题讨论】：

标签： reactjs datepicker

【解决方案1】：

那里有许多节点模块，如果您有一个不符合您的需求（我还对您提供的日期选择器进行了一些调查，看来您是正确的，它没有多个日期选择)，你可以找到其他人。 This one，由 airbnb 提供，是一个日期范围选择器，react-multiple-datepicker 是一个您可以选择多个不相关日期的地方。

【讨论】：

【解决方案2】：

我最近查看了您的问题。

您可以使用selectsStart 选项后跟startDate={-your start date here-}、endDate={-your end date here-}，并使用关键字selectsEnd 结束您的选择。就是这样。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：