保持react-dates日历始终打开

Question

这是我的dateRangePicker代码:实际上，我把这个代码看作是其他..but不适合我的解决方案。

因此此react-date组件将作为标签添加到下拉列表中。当你点击标签时，它会自动打开日历(不需要先点击"startDate“或"enddate")

  const [focusedInput, setFocusedInput] = useState(true);

  return (
    <div className="App">
      <div
        className={`customDatePicker__wrapper ${className} ${
          monthOpen || yearOpen ? "hideDays" : ""
        } ${props.hideArrowNav ? "hideArrows" : ""}`}
      >
        <DateRangePicker
          isOutsideRange={() => false}
          startDate={startDate}
         startDateId="tado-start-date"
          endDate={endDate}
          endDateId="tado-end-date"
          className={`customDatePicker`}
          onDatesChange={handleDatesChange}
          renderMonthElement={renderMonthElement}
          focusedInput={focusedInput}
          onFocusChange={focusedInput => setFocusedInput(focusedInput)}
          onFocusChange={focusedInput => {
            if (focusedInput) {
              setFocusedInput(focusedInput);
            }

            else {
            //setFocusedInput (moment().format());
            setFocusedInput(focusedInput)

                }
          }}
           closeDatePicker= 'Close'
          showInputs={false}
          hideKeyboardShortcutsPanel
          
        />
      </div>
    </div>
  );
};

Answer 1

您可以使用onClick={(e) => setFocusedInput('startDate')}来完成此操作。

然后，日期选择器将打开并显示日期状态。