react-hook-form: MUI KeyboardDatePicker inside Controller is returning +1 day
Hi, I detected a problem in my code. I’m using RHF with MUI date picker. It seems that the value returned in the submit of RHF is adding one day. I think it’s related to timezones but then I was searching in slack and found this conversation.
So I opened the code that @bluebill1049 put in there and it is happening there too.
You can test it here https://qsd8r.csb.app/, if you select a date from MUI component, then the submit returns +1 day. I’m from Buenos Aires, Argentina. The time zone here is -3. I don’t know if that has something to do with it.
It doesn’t happen if I use KeyboardDatePicker outside Controller.
My code in typescript
<Controller
as={
<KeyboardDatePicker
label="Fecha de Ingreso"
required
format="dd/MM/yyyy"
clearable
inputVariant="outlined"
error={!!errors.fechaIngreso}
onChange={() => { }}
value={() => { }}
helperText={errors.fechaIngreso && errors.fechaIngreso.message}
/>
}
name="fechaIngreso"
control={control}
/>
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 17 (10 by maintainers)
@bluebill1049 I found the problem. To initialize the default value of date picker (not datetimepicker), it has to be in this way (without hours, mins and seconds). For example,
const defaultValues = { muiDatePicker1: new Date(“2020-08-01T00:00:00”), muiDatePicker2: new Date(new Date().setHours(0, 0, 0)) }
In the sandbox where we were testing it was initialized this way
MUIPicker: new Date(“2014-08-18T21:11:54”),
That’s where the 11 minutes came from, the ones that I marked in red.
It seems that the Mui Date Picker try to take that time to ISO format, and when it does so, for example in my time zone it added 3 hours (I’m in -3 time zone), so it ended up being 2014-08-19T00:11:54