如何在第一次单击日期文本字段时生成我的日期选择器 UI？

Question

我使用的阵营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",
            }}
          />

我想调整的一点是，当我单击可以输入日期的文本字段或单击图标图形以显示日期选择器时，我希望日期选择器 UI 自动出现。我不确定如何配置一些东西，一旦我点击文本字段，日期选择器的 UI 就会弹出。

编辑：我无法使用代码启动工作应用程序，但这是默认情况下使用右侧图标呈现的文本字段的屏幕截图...

现在您必须单击该图标才能出现日期选择器，但我希望能够单击文本字段并立即显示日期选择器。

编辑 2：屏幕截图以回应给出的答案......

Answer 1

解决此问题时要处理的多个问题：

1. 由于您想将焦点放在Input控制 DatePicker Popover 的打开上 - 必须是一个受控组件（您使用状态控制它的打开。
   这个状态实际上open是KeyboardDatePicker
2. 下一个问题是，一旦 Popover 关闭 - 焦点会回到Input，一旦我们有了焦点，Popover 就会打开（不好）。我们可以使用disableRestoreFocusPopover的prop来解决这个问题。
3. 我们需要使用onFocus的Input开酥料饼，但onClose该酥料饼的真正接近它（因为我们控制了酥料饼的打开状态）。
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
}}

Answer 2

对于使用更新的material-ui库（v5）的任何人，您可以使用open={bool}属性来利用何时打开DatePicker。

           const [dateOpen,setDateOpen] = useState(false);
           const [dueDate,setDueDate] = useState(new Date());
                <DatePicker
                  clearable={true}
                  open={dateOpen}
                  onClose={() => setDateOpen(false)}
                  label="Due Date"
                  value={dueDate}
                  minDate={new Date()}
                  onChange={(newValue) => {
                    setDueDate(newValue);
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      onClick={() => setDateOpen(true)}
                    />
                  )}
                />