I'm expereiencing something tricky for me. I'm using mui datepicker, at the mean time I want to validate the input format of date, because user can also input date by themselves, so I want to avoid invalid date format. Hence, I'm also using regex.
My problem is, using regex never make it work.
const [dob, setDob] = useState('')
const [dobErrorText, setDoBErrorText] = useState("")
function validateDate(testdate) {
var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
console.log(date_regex.test(testdate))
return date_regex.test(testdate);
}
if(!dob){
e.preventDefault()
setDoBErrorText("*** Enter your date of birth")
}
else if(!validateDate(dob)){
e.preventDefault()
setDoBErrorText("*** Date format must be mm/dd/yyyy")
console.log(dob)
// setDob('')
}
else{setDoBErrorText("")}
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={dob}
onChange={(newValue) => {
setDob(newValue);
}}
inputFormat="MM/DD/YYYY"
renderInput={(params) =>
<TextField {...params}
required
id="dob"
label="Date of Birth"
size="small"
fullWidth
style={{backgroundColor:"#f8f7f9"}}
error={dobErrorText}
// helperText='enter your dob'
/>
}
/>
</LocalizationProvider>
{!dobErrorText && <p style={{textAlign: 'left', marginLeft: 14, color:'grey'}}> ***mm/dd/yyyy </p>}
{dobErrorText && <p style={{color: '#cc0000', textAlign: 'left', marginLeft: 14}}> {dobErrorText} </p>}
<br/><br/>
I console.log out the date_regex.test(dob) and console.log(dob). It's output looks like this:

Therefore I notice that the date_regex.text(testdate) will always be false because the dob data format is M{......}. Hence I was not be able to do the date regex validation.
So I was wondering does anyone know how to validate this kind of format? Or point our another way to do the date format validation using mui datepicker?