React-dates: Changing locale and calandar

[ImanMh]

Since react-dates is based on moment and moment supports many locales and calendars, there should be an easy way to change calendar.
First I want to know what's the proper way of switching locale before react-dates renders the component?
Second I want to know what's the proper way of switching calendar? This one is a little bit more complex. Suppose I want to add moment-jalaali. I have to import it and pass the instance to the react-dates but since react-dates uses it's own imported instance of moment, it will not see moment-jalaali.

[ljharb]

moment is a singleton (that's why it's a peerDependency) - when you add a locale plugin, react-dates' moment gets it too.

[BrunoAl]

I am having the same problem, I am trying to change the locale to pt-Br (Brazilian Portuguese) but I can't figure out how.

[BrunoQuaresma]

I have the same issue.

[majapw]

As @ljharb mentioned, moment is a peer dependency of react-dates not a regular dependency (https://github.com/airbnb/react-dates/blob/master/package.json#L103). This means that when you npm install react-dates, you don't get a separate instance of moment in that tree. Whatever instance of moment you have in your app where you require react-dates is the same instance `react-dates will use.

You can then set the date before you render the component in the way we do in the non-english locale example here: https://github.com/airbnb/react-dates/blob/master/stories/DateRangePicker.js#L177:L191

[majapw]

@BrunoAl moment.locale('pt-br') is probably what you need. I think case is important.

[BrunoQuaresma]

@majapw thanks!!!!!!!!

[asliwinski]

I arrived here by googling "react dates locale". I think the above should be mentioned in the readme.

[ljharb]

@asliwinski a PR would be appreciated :-) that said, this is part of moment.js, so we wouldn't want much more than a sentence and a link to moment's docs.

[KnockNow]

@majapw yes it works but only when mounting the component. If my locale is updated after, it doesn't work.
Why not make a local setting ? Where can you be a solution ?

[majapw]

@KnockNow I get the frustration but I don't feel like it is appropriate for react-dates to take care of what is essentially a global setting outside of the package. Because moment locale affects everything in your app that might use dates, I think it makes sense for the consumer to set it themselves in the appropriate place.

[KnockNow]

@majapw Sorry, I do not understand your logic. If this is the overall setting of the project, why not connect it to your lib? I clone your repo and I try, it works. For a calendar that is called "internationalizable"...

[majapw]

@KnockNow It's not just an overall setting of the react-dates project; it's an overall setting of the app in which react-dates may be used (e.g. airbnb.com). For example, if airbnb.com uses moment to display dates on reviews and also to set the formatting of the datepicker, if you changed the moment locale via a prop on the datepicker, you would also change the formatting on the reviews dates. This side-effectness is why react-dates should not own setting moment locale (and also why moment is a peer dep), and it should instead be properly set by the higher level app.

At least that is the logic we are following.

[tranan89]

@majapw You should make locale a prop or let us pass in a local moment instance. Changing the global moment locale isn't good enough for a an international app that server side renders with multiple languages. Now we probably have to change to another datepicker...

[krcaltomas99]

If you want to change locales on the fly, you have to create an instance from moment js and then if you change the language, you have to call the change again. This will probably change the date if you already selected one, but I'm sure you can fix that very easily 😇

Working Example

const [date, setDate] = useState(moment());
useEffect(() => {
moment.locale(i18n.language);
setDate(moment());
}, [i18n.language]);

[espretto]

Hello, just for anyone looking for a quick solution to trick react-dates into adopting a given locale on every (server-side-)render, use this hack: https://github.com/airbnb/react-dates/issues/327#issuecomment-414840540 . (Upvotes should go there, too)