Reactjs Don'；不允许用户在React DatePicker中写入日期

我有一个无法解决的问题。我希望不允许用户在输入上写东西。我希望他们从日历图标中进行选择。我的问题是我的用户可以在输入上写一些东西。我使用

DatePicker

而不是键盘DatePicker`实现了这一点，但我还希望显示DatePicker图标

简而言之，我想实现ff：

不允许用户在输入上写入

显示日期选择器图标

他们应该能够单击输入中的任意位置

请检查我的代码沙盒

---

Ciao，为了不允许用户在输入和显示日期选择器图标上写入内容，您可以通过以下方式覆盖

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

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

---

codesandbox已修改。

显示日期选择器图标是什么意思？沙箱中已经有一个日期选择器图标。@Dushan Randika。是的，它在那里，但我想实现这两个目标。不允许用户同时写入和显示日期选择器，或者我缺少一些东西。他们应该能够单击TextField中的任意位置以打开DatePicker图标。谢谢。@Joseph在这种情况下，只需要使用

open

props并在

onClose

和

onClick

事件中使用它。代码沙盒修改。我会更新我的答案。你好。如何使

TextField

具有

光标：“指针”

？目前只有

日期选取器图标

有此功能。谢谢你，hi@Joseph，只需要将

inputProps={{style:{cursor:{pointer}}}}

添加到

TextField

组件中。我已经修改了代码沙盒。非常感谢。你可能想帮我做这个。非常感谢。

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