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

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