React-datepicker: Date string in input field is not formatted according to locale prop

Created on 19 Jan 2020  路  4Comments  路  Source: Hacker0x01/react-datepicker

Describe the bug
I think it would make sense for the format of the date string shown in the input to reflect the provided locale when no format string is provided. Currently it always defaults to mm/dd/yyyy in absence of a format string, which I think is incorrect behavior when a locale is set. E.g. for the below screenshot, the format should be dd-mm-yyyy with the locale prop set to nl. (The locale _is_ properly registered, as you can see in my screenshot, the text in the popup shows 'januari' in Dutch.)

To Reproduce
Steps to reproduce the behavior:

Select a date.

Expected behavior
The date picker shows the date string in the format provided by the supplied date-fns object.

Screenshots
Screen Shot 2020-01-19 at 23 29 46

Update: I think this issue could be solved if react-datepicker simply used P as the default format string instead of mm/dd/yyyy . This would still display the American format by default, except when a locale is provided.

wontfix

Most helpful comment

@AndrewPrifer you can use dateFormat="P" prop to get the same effect.
Related docs:
https://date-fns.org/v2.9.0/docs/format

Nonetheless, I agree: no reason it should default to the american format _at all_.

All 4 comments

Update: see the below comment for a simpler workaround.

Found a tolerably awkward workaround for in the meantime, in case anyone else is looking for a solution:

import { enUS, nl } from 'date-fns/locale';

const locales = {
  'en-US': enUS,
  'nl-NL': nl,
};

for (const [key, value] of Object.entries(locales)) {
  registerLocale(key, value);
}

// ...

<DatePicker
  locale={locale}
  dateFormat={locales[locale].formatLong?.date({ width: 'short' })}
/>

This sets the format string to that of the locale.

@AndrewPrifer you can use dateFormat="P" prop to get the same effect.
Related docs:
https://date-fns.org/v2.9.0/docs/format

Nonetheless, I agree: no reason it should default to the american format _at all_.

@anadutova thank you! That makes things much simpler. Then I think the obvious solution would be for react-datepicker to simply use "P" as the default format string and not the American one. It wouldn't even be much of a breaking change since date-fns defaults to en-US so people who don't specify a locale wouldn't even notice it, and those who do probably want to format their date in their provided locale anyway.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hoodsy picture hoodsy  路  3Comments

jcabrerazuniga picture jcabrerazuniga  路  3Comments

flaurida picture flaurida  路  3Comments

ericreis picture ericreis  路  3Comments

ali-master picture ali-master  路  3Comments