MUI v5在@mui/lab包中增加了DatePicker组件。如果你想在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状态，并在单击TextField时将其设置为true：

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

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

现场演示

如果您使用的是<TextInput/>而不是<DatePicker/>。如果您使用的是旧版本的Material UI，而该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()
      }} 
   />
)}