How to validate mui datepicker? it returns a data format that I don't understand

Viewed 16

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: console output

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?

0 Answers
Related