css - MUI - 单击文本字段中的任意位置时打开日期选择器

Question

我有一个日期选择器，我想在用户单击字段中的任何位置时显示它，而不仅仅是日历图标上。

这是选择器

export function DatePickerField(props) {
  ......

  return (
      <Grid container>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                  {...field}
                  {...props}
                  disableToolbar
                  inputVariant="outlined"
                  value={selectedDate}
                  onChange={_onChange}
                  error={isError}
                  autoOk
                  invalidDateMessage={isError && error}
                  helperText={isError && error}
              />
          </MuiPickersUtilsProvider>
      </Grid>
  );
}

我需要这样做，因为如果手动输入日期，它不会引发错误，但我会invalid date输入表单数据。

单击字段时如何显示选择器？

标签： cssreactjsmaterial-uiweb-frontend

Answer 1

MUI v5在包中添加了DatePicker组件@mui/lab。如果您希望在用户单击 , 后打开选择器TextField，使用MobileDatePicker，虽然它没有日历图标，但如果您想要一个，请参阅此答案。

<MobileDatePicker
  {...}
  renderInput={(params) => <TextField {...params} />}
/>

然而DesktopDatePicker确实有日历图标，但是你必须编写额外的代码来控制open状态并告诉选择器在TextField被点击时打开：

<DatePicker
  open={open}
  onOpen={() => setOpen(true)}
  onClose={() => setOpen(false)}
  renderInput={(params) => {
    return (
      <TextField
        {...params}
        onClick={(e) => setOpen(true)}
      />
    );
  }}
/>

---

原始答案

您可以控制KeyboardDatePicker的open状态并将其设置为单击true时TextField：

const [open, setOpen] = useState(false);

return (
  <KeyboardDatePicker
    open={open}
    onOpen={() => setOpen(true)}
    onClose={() => setOpen(false)}
    TextFieldComponent={(props) => (
      <TextField {...props} onClick={(e) => setOpen(true)} />
    )}
    {...other}
  />
);

现场演示