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

Question

我正在使用 React 16.13.0 和 material 的 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

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

因为你想把焦点放在 Input 上来控制 DatePicker Popover 的打开 - 必须是一个受控组件（你可以使用状态控制它的打开。
这个状态实际上是 KeyboardDatePicker

open

下一个问题是，一旦 Popover 关闭 - 焦点就会回到 Input，一旦我们获得焦点，Popover 就会打开（不好）。我们可以使用 Popover 的 disableRestoreFocus 属性来解决这个问题。
我们需要使用Input的onFocus来打开Popover，但是实际关闭Popover的onClose（因为我们控制的是打开状态弹出框）。
最后 - 图标不再控制 Popover 的打开。我们需要这样做，使用 KeyboardButtonProps.

onFocus

这是完整的代码：

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

这是一个 link 的工作示例：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

对于其他感兴趣的人，我提出了以下解决方案：

您将 KeyboardDatePicker 更改为 DatePicker
您利用 InputProps 并添加日历图标

    InputProps={{
        endAdornment: (
            <InputAdornment>
                <Event />
            </InputAdornment>
        )
     }}

工作沙箱： https://codesandbox.io/s/customicon-forked-zitm9?file=/src/DatePicker.js

Answer 3

对于使用更新的 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)}
                    />
                  )}
                />

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

How do I spawn my date picker UI upon first clicking on the date text field?

focus

modal-dialog

datepicker

reactjs

material-ui