Polaris-react: DatePicker (translate/locale)

[joohncruz]

Hi guys, fine?

I'm using Datepicker component however need translate months and days for my application.

I read about internationalization, but this component uses the properties:

DatePicker

• nextMonth
• previousMonth
• today

How could I solve my question? Could someone help me?

[solonaarmstrong-zz]

Hi @joohncruz 👋 Currently, we expose the weekStartsOn prop that allows you to change the first day of the week, since different countries have different calendars. The rest is handled by the browser locale settings. Is there a specific implementation you're trying to achieve? Or a use case where browser locale wouldn't be enough?

[chloerice]

Hey @joohncruz, sorry for the delay--you definitely found a bug, thank you 🙏!

I've been playing around with this today and there's definitely a bug here. The month and day abbreviation strings are in English regardless of what browser language/locale is because we're using utility methods and types from Shopify/javascript-utilities that have hardcoded string enums.

For example, I changed my language to Japanese in the admin, but the DatePicker doesn't translate because these strings are hardcoded.

I noticed while digging around the DatePicker code that the Month subcomponent has the props weekdayName and monthName. The DatePicker doesn't pass these to the Month and the Month doesn't do anything with them even if they were set. I'm thinking this was an oversight when the component was first built 🤔. We definitely need to have props for weekday names and abbreviations along with month names so the translations set to the AppProvider i18n prop can replace the english strings in this component.

[joshuajay]

Hi! The Analytics Team is also impacted by this as we'd like to have our date pickers fully internationalised, including the calendars that come from Polaris.

My initial thought was to pass through a locale prop and use Intl.DateTimeFormat to format the dates in the required locale. That way we won't need to handle individual translations of every single month / day / year etc.

[joshuajay]

Also, happy to contribute on this, or pair, or whatever is necessary :)

[joshuajay]

I'm going to work on a PR and see where it gets me :)

[chloerice]

Thanks @joshuajay!!!

[chloerice]

The fix shipped in #1005 will be available in the 3.7.2 release.