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

Posted 2023-02-22

【中文标题】不允许用户在 React DatePicker 中写入日期

【英文标题】：Don't Allow User to Write Date in React DatePicker

【发布时间】：2021-02-19 08:16:37

【问题描述】：

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

总之，我要实现ff：

不允许用户在输入上书写。 显示日期选择器图标 他们应该能够点击输入中的任意位置

请检查我的代码框

Click here

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

【问题讨论】：

显示日期选择器图标是什么意思？沙盒中已经有一个日期选择器图标。

@Dushan Randika。是的，它就在那里，但我想同时实现。不允许用户在同一时间编写和显示日期选择器

【参考方案1】：

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

Here你的密码箱已修改。

更新

如果你想让用户点击输入中的任何地方，你可以使用open props 并使用onClick 和onClose props 修改它：

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

Herecodeandbox 已修改。

【讨论】：

对不起，我缺少一些东西。他们应该能够单击 TexttField 中的任意位置以打开 DatePicker 图标。谢谢。

@Joseph 在这种情况下，只需要使用 open 道具并在 onClose 和 onClick 事件上使用它。 Here 代码框已修改。我会更新我的答案。

您好。我怎样才能让TextField 拥有cursor: 'pointer'？现在只有datepicker icon 有这个。谢谢

嗨@Joseph，只需将inputProps= style: cursor: "pointer" 添加到TextField 组件。我已经修改了代码框。

非常感谢。你可能想帮我解决这个问题？ ***.com/questions/64726379/…。谢谢