React-DatePicker

Question

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

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

问题是选择器在开始日期关闭 selection.

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

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

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

我尝试添加 shouldCloseOnSelect 设置为 true 但它也没有在结束日期 select 关闭。

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

当前代码：

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

}

Answer 1

这是一个已知问题 - Github issue

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

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

Answer 2

您可以使用 shouldCloseOnSelect 道具：

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

}

React-DatePicker - 如何在开始日期选择时禁用关闭

React-DatePicker - how to disable closing on start date selection

reactjs

datepicker