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

。

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

Answer 1

MUI v5 在 DatePicker

 包中添加了 

@mui/lab 组件。如果您希望在用户单击

TextField

内部后打开选择器，请使用

MobileDatePicker

，但这没有日历图标，如果您想要一个，请参阅 this 答案。

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

现场演示

Answer 2

对于使用 slotProps 的 MUI-X Datepicker v6，它看起来像这样：

const [open,setOpen] = useState(false);
<DatePicker     
   open={open}
   onClose={() => setOpen(false)}
   slotProps={{
     textField: {
      onClick: () => setOpen(true),             
     },
   }}
 />

Answer 3

如果您使用的是

<TextInput/>

而不是

<DatePicker/>

。如果您使用的是旧版本的 Material UI，没有 DatePicker 或者只是想使用 TextInput。

import { useRef } from 'react'
import TextField from '@material-ui/core/TextField'

const DateInput = (props) => {
  const inputRef = useRef()
  return (
   <TextField
      {...props}
      type={'date'}
      inputRef={inputRef}
      onClick={() => {
        inputRef.current.showPicker()
      }} 
   />
)}

Answer 4

2024 年更新

随着 https://mui.com/x/react-date-pickers/date-picker/ version 6.19.6，当你使用抽屉并且 DatePicker 在抽屉后面渲染时，你可以像这样使用 slotProps .

<DatePicker
 className="w-full"
 label="Thru date"
 value={toDate}
 onChange={setToDate}
  slotProps={{
  field: { clearable: true },
  popper: {
    disablePortal: true,
   },
  }}
/>