不允许用户在 React DatePicker 中写入日期
Don't Allow User to Write Date in React DatePicker
我有一个我无法解决的问题。我希望不允许用户在输入上写东西。我希望他们从日历图标中进行选择。我的问题是我的用户可以在输入上写一些东西。我使用 DatePicker
而不是 KeyboardDatePicker` 实现了它,但我还希望显示日期选择器图标。
简而言之,我想实现的是:
- 不允许用户在输入框上书写。
- 显示日期选择器图标
- 他们应该能够点击输入框内的任何地方
请检查我的codesandbox
<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
属性,并使用onClick
和onClose
属性修改它:
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 已修改。
我有一个我无法解决的问题。我希望不允许用户在输入上写东西。我希望他们从日历图标中进行选择。我的问题是我的用户可以在输入上写一些东西。我使用 DatePicker
而不是 KeyboardDatePicker` 实现了它,但我还希望显示日期选择器图标。
简而言之,我想实现的是:
- 不允许用户在输入框上书写。
- 显示日期选择器图标
- 他们应该能够点击输入框内的任何地方
请检查我的codesandbox
<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
属性,并使用onClick
和onClose
属性修改它:
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 已修改。