不允许用户在 React DatePicker 中写入日期

Don't Allow User to Write Date in React DatePicker

我有一个我无法解决的问题。我希望不允许用户在输入上写东西。我希望他们从日历图标中进行选择。我的问题是我的用户可以在输入上写一些东西。我使用 DatePicker 而不是 KeyboardDatePicker` 实现了它,但我还希望显示日期选择器图标。

简而言之,我想实现的是:

  1. 不允许用户在输入框上书写。
  2. 显示日期选择器图标
  3. 他们应该能够点击输入框内的任何地方

请检查我的codesandbox

Click here

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <KeyboardDatePicker
    error={false}
    helperText={null}
    autoOk
    fullWidth
    inputVariant="outlined"
    value={selectedDate}
    onChange={handleDateChange}
    format="MMM dd yyyy"
  />
</MuiPickersUtilsProvider>

再见,为了不允许用户在输入和显示日期选择器图标上书写,您可以这样覆盖 TextFieldComponent

const TextFieldComponent = (props) => {
  return <TextField {...props} disabled={true} />;
};

const App = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
         error={false}
         helperText={null}
         autoOk
         fullWidth
         inputVariant="outlined"
         value={selectedDate}
         onChange={handleDateChange}
         format="MMM dd yyyy"
         TextFieldComponent={TextFieldComponent} /*override TextFieldComponent*/
     />
    </MuiPickersUtilsProvider>
  );
};

Here 您的 codesandbox 已修改。

更新

如果你想允许用户点击input中的任何地方,你可以使用open属性,并使用onClickonClose属性修改它:

const App = () => {
  const [selectedDate, handleDateChange] = useState(new Date());
  const [dtopen, setDtOpen] = useState(false);       /*state var to open/close datepicker*/

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
       <KeyboardDatePicker
         error={false}
         helperText={null}
         autoOk
         fullWidth
         inputVariant="outlined"
         value={selectedDate}
         onChange={handleDateChange}
         format="MMM dd yyyy"
         TextFieldComponent={TextFieldComponent}
         onClick={() => setDtOpen(!dtopen)}     /*onClick to open/close datepicker*/
         open={dtopen}                          /*assign state var to open props*/
         onClose={() => setDtOpen(false)}      /*onClose to close datepicker*/ 
       />
   </MuiPickersUtilsProvider>
  );
};

Here codesandbox 已修改。