I am using the controlled form of DatePicker
In the onChange handler I need a way to prevent date selection on certain condition
To do that I am setting the value to null
Still I the field displays the clicked value
I need the field to be in the initial state even after clicking the date
How do I achieve this?
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
export default function DatePickerValue() {
const [value, setValue] = React.useState<Dayjs | null>(null);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker', 'DatePicker']}>
<DatePicker
label="Controlled picker"
value={value}
onChange={(newValue) => setValue(null)}
/>
</DemoContainer>
</LocalizationProvider>
);
}