Search code examples
reactjsredux-formreact-datepicker

Redux-form and react-datepicker - how to differentiate presented value format in the input and real value format?

I use Redux Form and react-datepicker It works very nice, and I would like to get it work ideally according to my needs. I need to show the date in localized format (let's say DD/MM/YYYY), and in the same time save value attribute of the input in static format ("YYYY-MM-DD"). I could add a hidden input with such value format, but if it's possible to avoid it using datepicker customization, it would be great!

Thanks for your advice in advance.

UPD: Take a look on screenshots:

  1. This is how it works now (nothing has to be changed here).

DatePicker

  1. And value is synchronized with the locale. I want to keep the locale to present my date in the locale format for the user, and keep the format unchanged ("YYYY-MM-DD" forever) for the back end.

input value attribute

Here is the link to codesandbox.

Solution

  • You can use state and moment.js package to have date in several formats.

    EDIT: the key thing is redux form. Datepicker is just view that can show exactly what you need. So, what you can do is: change redux form field value (or what you are using) and just have another state field (let's say 'dateForDatepicker') which value you'll pass to datepicker.

    GOOD SOLUTION: https://stackoverflow.com/a/42726079/7479959