I have a date picker that I want to show when the users click anywhere in the field not just on the calendar icon.
Here's the picker
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>
);
}
I need to do this because if date entered manually, it throws no errors but I get invalid date
in the form data.
How can show the picker when the field is clicked?
MUI v5 added the DatePicker
component in the @mui/lab
package. If you want a picker to be opened after when the user clicked inside the TextField
, use MobileDatePicker
, this doesn't have the calendar icon though, see this answer if you want to have one.
<MobileDatePicker
{...}
renderInput={(params) => <TextField {...params} />}
/>
The DesktopDatePicker
however does have the calendar icon, but you have to write additional code to control the open
state and tell the picker to open when TextField
is clicked:
<DatePicker
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
renderInput={(params) => {
return (
<TextField
{...params}
onClick={(e) => setOpen(true)}
/>
);
}}
/>
You can control the KeyboardDatePicker
's open
state and set it to true
when the TextField
is clicked:
const [open, setOpen] = useState(false);
return (
<KeyboardDatePicker
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
TextFieldComponent={(props) => (
<TextField {...props} onClick={(e) => setOpen(true)} />
)}
{...other}
/>
);