lookfirst / mui-rff

MUI 5 / Material UI + React Final Form

Home Page:https://lookfirst.github.io/mui-rff/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

DatePicker parse problem with date format

ugoQ opened this issue · comments

commented

Describe the bug
First, I'd like to apologize if the problem is related to rff itself and not mui-rff, I just can't find a way to resolve this.
My problem is that I have a KeyboardDatePicker with the format dd/MM/yyyy and I don't want it's value stored as a Date in rff, I want it to be stored as a string with the dd/MM/yyyy format. The thing is, it's value is stored with the good format in the rff values, but the date is not good in the input (the months and days are inverted).

To Reproduce
Ok here is what I got.
First, my App is wrapped with a
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={frLocale}></MuiPickersUtilsProvider>

In my component, I have this:

import { format } from "date-fns";
import { KeyboardDatePicker } from "mui-rff";

<KeyboardDatePicker
  name={code}
  label={label}
  cancelLabel={"ANNULER"}
  okLabel={"FERMER"}
  clearLabel={"EFFACER"}
  autoOk
  clearable
  format="dd/MM/yyyy"
  autoComplete="off"
  fieldProps={{
    parse: value => format(value, 'dd/MM/yyyy')
  }}
/>

Expected behavior
So, when I click on a day in the calendar, the value in rff is good with the format dd/MM/yyyy, but the value in the input is not good, the months and the days are inverted.
Examples:
- if I click on the 4th of August 2021 (04/08/2021 in my desired format), the value in the input becomes 08/04/2021 (value is 04/08/2021 in rff)
- If I click on a day greater than 12, the value is not even set on the input, but is changed in rff

Any help would be gladly appreciated.

Hey, thanks for this. I'm going to move this to a discussion since it isn't really an issue per say. =) Let's continue over there...