React-DatePicker - 如何禁用关闭开始日期选择答案

【问题标题】：React-DatePicker - how to disable closing on start date selectionReact-DatePicker - 如何禁用关闭开始日期选择
【发布时间】：2021-05-26 07:39:26
【问题描述】：

我为组件库开发 DatePicker，并使用 react-datepicker npm 来实现。

期望的行为是用户单击输入，日期选择器将打开，用户将选择 2 个日期，当单击第 2 个日期时，DatePicker 将关闭。

问题是选择器在开始日期选择时被关闭。

我删除了所有代码，并使用 npm 演示中显示的确切示例：

https://reactdatepicker.com/#example-date-range-using-input-with-clear-button

日期选择器仍然在选择开始日期时关闭。

我尝试将shouldCloseOnSelect 添加为true，但它也没有在结束日期选择时关闭。

如何防止在开始日期关闭，并在结束日期允许。

当前代码：

const MyDatePicker = () => {
  const [dateRange, setDateRange] = useState([null, null]);
  const [testStart, testEnd] = dateRange;
  return (
    <ReactDatePicker
      selectsRange={true}
      startDate={testStart}
      endDate={testEnd}
      onChange={(update: any) => {
        setDateRange(update);
      }}
      isClearable={true}
    />
  );

}

【问题讨论】：

标签： reactjs datepicker react-datepicker

【解决方案1】：

这是一个已知问题 - Github issue

我使用open、onInputClick 和onClickOutside 道具来解决它，如下所示：

const MyDatePicker = () => {
 const [isOpen, setIsOpen] = useState(false);
  return (
    <ReactDatePicker
      onInputClick={() => setIsOpen(true)}
      onClickOutside={() => setIsOpen(false)}
      open={isOpen}
      selectsRange={true}
      startDate={testStart}
      endDate={testEnd}
      onChange={(update: any) => {
        setDateRange(update);
        if (update[1]) {
          setIsOpen(false);
        }
      }}
      isClearable={true}
    />
  );

【讨论】：

【解决方案2】：

你可以使用shouldCloseOnSelectprop：

const MyDatePicker = () => {
    const [dateRange, setDateRange] = useState([null, null]);
    const [startDate, endDate] = dateRange;

    return (
        <ReactDatePicker
            selectsRange={true}
            shouldCloseOnSelect={!(!startDate || Boolean(startDate && endDate))}
            startDate={startDate}
            endDate={endDate}
            onChange={(update: any) => {
                setDateRange(update);
            }}
            isClearable={true}
        />
    );

}

【讨论】：