Блог

Итак, это мой код dateRangePicker: я на самом деле вижу этот код как решение где-то в другом месте .. но не работает для меня.

Таким образом, этот компонент с датой реакции будет добавлен в выпадающий список в качестве метки. и когда вы нажимаете на ярлык, он автоматически открывает календарь (без предварительного нажатия на «Начальную дату» или «конечную дату»)

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

 

Вы можете сделать это с помощью onClick={(e) => setFocusedInput('startDate')} .
Тогда откроется окно выбора даты с указанием даты состояния.