acceptRegex in DatePicker MUI library not working as intended

Viewed 177

I am trying to block invalid date input by using the acceptRegex property in Datepicker but couldn't get it applied. I don't want the user to enter an invalid date like 3022-56-45 by keyboard input.I should be allowing the numbers which forms valid date only. Here is my current implementation.

<LocalizationProvider dateAdapter={AdapterDateFns}>
              <DesktopDatePicker
                label="Date of Birth"
                inputFormat="yyyy-MM-dd"
                acceptRegex="/^d{4}-d{2}-d{2}$/"
                mask={"____-__-__"}
                minDate="1900-01-01"
                value={dateOfBirth ? parseISO(dateOfBirth) : null}
                onChange={(val) => {
                  setDateOfBirth(moment(val).utc().format("YYYY-MM-DD"));
                }}
                renderInput={(params) => (
                  <TextField fullWidth sx={{ pr: 3 }} {...params} />
                )}
              />
            </LocalizationProvider>
0 Answers
Related