Как создать пользовательский интерфейс выбора даты при первом нажатии на текстовое поле даты?

Question

Я использую React 16.13.0 и компонент KeyboardDatePicker материала - https://material-ui-pickers.dev/api/KeyboardDatePicker. Я настроил это так ...

import {
  KeyboardDatePicker,
  KeyboardTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";
...

          <KeyboardDatePicker
            margin="normal"
            id="date-pickUp"
            label="Select Date"
            format="MM/dd/yyyy"
            value={pickUpDateLabel}
            onChange={(date) => handleDate(date, "pickUp")}
            KeyboardButtonProps={{
              "aria-label": "change date",
            }}
          />

Я хотел бы настроить то, что, когда я нажимаю на текстовое поле, в котором вы можете ввести дату, или щелкните значок graphi c чтобы вызвать средство выбора даты, я бы хотел, чтобы интерфейс средства выбора даты появлялся автоматически. Я не уверен, как настроить что-то такое, чтобы, как только я нажимал на текстовое поле, всплывал пользовательский интерфейс для выбора даты.

Редактировать: Я не могу получить рабочее приложение с кодом, но вот снимок экрана текстового поля, которое отображается по умолчанию со значком справа ...

Прямо сейчас вам нужно щелкнуть этот значок, чтобы появилось средство выбора даты, но я хотел бы иметь возможность щелкнуть текстовое поле и сразу же отобразить средство выбора даты.

Редактировать 2: Снимок экрана в ответ на данный ответ ...

Answer 1

Множество проблем, которые необходимо решить при решении этой проблемы:

1. Поскольку вы хотите сосредоточиться на Input для управления открытием DatePicker Popover - это должен быть управляемый компонент (которым вы управляете его открытие с использованием состояния.
   Это состояние на самом деле является open опорой KeyboardDatePicker
2. Следующая проблема заключается в том, что после закрытия Popover фокус возвращается на Input и когда у нас есть фокус, поповер откроется (не очень хорошо). Мы можем решить это, используя disableRestoreFocus опору поповера.
3. Нам нужно использовать onFocus из Input чтобы открыть Popover, но onClose Popover, чтобы фактически закрыть его (потому что мы контролируем открытое состояние Popover).
4. Наконец - значок больше не контролирует открытие Popover Мы должны сделать это, используя onFocus из KeyboardButtonProps.

Это полный код:

const KeyDatePickerContainer = () => {
  const [selectedDate, handleDateChange] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <KeyboardDatePicker
      variant="inline"
      value={selectedDate}
      inputVariant="outlined"
      label="With keyboard"
      format="MM/dd/yyyy"
      onChange={newDate => {
        handleDateChange(newDate);
      }}
      KeyboardButtonProps={{
        onFocus: e => {
          setIsOpen(true);
        }
      }}
      PopoverProps={{
        disableRestoreFocus: true,
        onClose: () => {
          setIsOpen(false);
        }
      }}
      InputProps={{
        onFocus: () => {
          setIsOpen(true);
        }
      }}
      open={isOpen}
    />
  );
};

Вот ссылка на рабочий пример : https://codesandbox.io/s/material-pickers-open-modal-click-on-text-kjgjk

Обновление: если вы хотите также закройте DatePicker после того, как дата была выбрана, вы можете использовать функцию onChange, чтобы не только установить новую дату, но и закрыть Popover:

onChange={newDate => {
    handleDateChange(newDate);
    setIsOpen(false); // Add this
}}