Localize polaris' datepicker

Hi,

Polaris has a date picker component:

I couldn’t find a way to localize its content (translate month names and days names). Any idea?

Thanks

Hey @Soufiane_Ghzal :waving_hand: - I did a bit of digging into this on my end and from what I can tell looking at the Props here, it doesn’t seem like it’s possible to handle localization externally:

https://polaris.shopify.com/components/selection-and-input/date-picker#props

Localization is handled on our end by the Date Picker component itself though (more info here in the code if you’re interested))

Hope this helps - let me know if I can clarify anything on our end here :slight_smile:

@Alan_G I’m not sure to understand whether it’s possible to actually translate it?

Hey @Soufiane_Ghzal :waving_hand: - Just clarifying that it is possible for the date picker to show translated content, but the component handles this internally (using the useI18n seen in the code). In practice, this means it should automatically use the locale provided by the surrounding environment in the browser.

There’s not a way to pass any specific translation props for the months/days yourself at the moment; but the component itself should take care of it based on that broader context of the user’s browsing environment.

Hope this helps clarify! :slight_smile:

@Alan_G thanks for your answer. So I understand that it’s using the browser’s locale. Are you working with the polaris dev team? Just want to give the feedback that it’s inconsistent with how embedded apps in Shopify work as we use the locale passed to the iframe’s url locale query param. It would be nice to be able to set a custom locale at the minimum rather than using the one from the browser.

Thanks

Hey @Soufiane_Ghzal :waving_hand: - Thanks for the follow-up and for sharing the feedback!

I’ll do some more digging into this and loop back with you here once I have more information. I do get how having the ability to set a custom locale would be needed here - I’ll see if I can confirm/at least pass along the feed back for you

Speak soon!

1 Like