我有一个日期选择器，当用户单击字段中的任意位置而不仅仅是日历图标时，我想显示该日期选择器。
这是选择器
export function DatePickerField(props) {
......
return (
<Grid container>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
{...field}
{...props}
disableToolbar
inputVariant="outlined"
value={selectedDate}
onChange={_onChange}
error={isError}
autoOk
invalidDateMessage={isError && error}
helperText={isError && error}
/>
</MuiPickersUtilsProvider>
</Grid>
);
}
我需要这样做，因为如果手动输入日期，它不会抛出任何错误，但我得到invalid date在表单数据中。
单击字段时如何显示选择器？
MUI v5添加了DatePicker https://mui.com/components/date-picker组件中的@mui/lab包裹。如果您希望在用户单击内部后打开选择器TextField, use MobileDatePicker，但这没有日历图标，请参阅this https://stackoverflow.com/a/69808162/9449426如果你想拥有一个，请回答。
<MobileDatePicker
{...}
renderInput={(params) => <TextField {...params} />}
/>
The DesktopDatePicker不过确实有日历图标，但是你必须编写额外的代码来控制open状态并告诉选择器何时打开TextField被点击：
<DatePicker
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
renderInput={(params) => {
return (
<TextField
{...params}
onClick={(e) => setOpen(true)}
/>
);
}}
/>
原答案
您可以控制KeyboardDatePicker's open状态并将其设置为true当。。。的时候TextField被点击：
const [open, setOpen] = useState(false);
return (
<KeyboardDatePicker
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
TextFieldComponent={(props) => (
<TextField {...props} onClick={(e) => setOpen(true)} />
)}
{...other}
/>
);
现场演示
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
