Skip to content

DatePicker parse problem with date format #522

Closed

Description

@ugoQ

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.

Activity

  1. lookfirst commented on Aug 18, 2021

    @lookfirst
    Owner

    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...

  2. Repository owner locked and limited conversation to collaborators on Aug 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions