default value for dateFormatCalendar is not suitable for japanese locale

[arnauddem]

Default value for dateFormatCalendar is 'LLLL yyyy' (ie June 2020), if used with japanese locale it produce the text '7月 2020' whereas expected text is '2020年 7月'. It's strange specially when uses dateFormat="P".

To Reproduce Steps to reproduce the behavior:

0. set locale to 'ja'
1. Use :

   <DatePicker
       onChange={(r: any) => ()}
       dateFormat="P"
       minDate={new Date()}
       fixedHeight
     />

2. calendar input shows '2020/07/16' which is localized
3. open calendar, the top date is '7月 2020' which is not localized

Expected behavior top date should '2020年 7月.

Screenshots If applicable, add screenshots to help explain your problem.

workaround use dateFormatCalendar="yyyy年 LLLL" for 'ja' locale only it shows:

however I expect react-datepicker to convert 'LLLL yyyy' default value to the right one in current locale.

Desktop (please complete the following information):

• Browser Chrome Version 83.0.4103.116 in Win10

[stale[bot]]

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.

[arnauddem]

This issue is still opened and require attention and fix, thanks to silly robot to not move it to stale state ! ;-).

[joos0701]

<DatePicker dateFormatCalendar={"yyyy年 LLLL"} />

[MBehtemam]

I have a same problem I created a Sandbox for this problem , Sandbox Sample

two date picker with same config except in locale

[stale[bot]]

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.

[arnauddem]

This issue is still opened and require attention and fix, thanks to silly robot to not move it to stale state ! ;-).

[PurpleMonkey729]

Default value for dateFormatCalendar is 'LLLL yyyy' (ie June 2020), if used with japanese locale it produce the text '7月 2020' whereas expected text is '2020年 7月'. It's strange specially when uses dateFormat="P".

To Reproduce Steps to reproduce the behavior:

0. set locale to 'ja'
1. Use :

 <DatePicker
        onChange={(r: any) => ()}
        dateFormat="P"
        minDate={new Date()}
        fixedHeight
      />

2. calendar input shows '2020/07/16' which is localized
3. open calendar, the top date is '7月 2020' which is not localized

Expected behavior top date should '2020年 7月.

Screenshots If applicable, add screenshots to help explain your problem.

workaround use dateFormatCalendar="yyyy年 LLLL" for 'ja' locale only it shows:

however I expect react-datepicker to convert 'LLLL yyyy' default value to the right one in current locale.

Desktop (please complete the following information):

• Browser Chrome Version 83.0.4103.116 in Win10

You are right. I am favor of it. Thanks.

[yuki0410-dev]

In date-fns, the format to return the year and date is not facilitated. On the other hand, the browser standard toLocaleDateString seems useful.

If dateFormatCalendar is unspecified, we believe we can easily obtain the desired string by modifying the library to format using toLocaleDateString. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

date.toLocaleDateString(local, {
    year: "numeric",
    month: "long",
}

There are two concerns with toLocaleDateString: the local props currently passed to the datepicker do not necessarily match the local strings supported by toLocaleDateString. DateTimeFormat API does not work with all browsers that support this library.

https://caniuse.com/date-tolocaledatestring https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat

4119

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.