<DatePicker onChange={handleDatePicker} value={userData.passportExpiryDate || null || passportExpiryDate} minDate={new Date().toISOString().split('T')[0].split('-').join('/')} renderInput={(params: any) => ( <TextField {...params} inputProps={{ ...params.inputProps, // readonly readOnly: true, placeholder: 'Select Date of Expiry', }} {...register('passportExpiryDate', { required: true, })} // className="date-picker date-picker-input" error={ (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '') } sx={{ '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red', }, '&:hover fieldset': { borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red', }, '&.Mui-focused fieldset': { borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red', }, }, }} /> )} />
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter