React-dates: How to add dynamic localization?

Created on 16 Aug 2020  路  2Comments  路  Source: airbnb/react-dates

I have been trying to add a localization for different languages.

I can add one language not multiple.

Is it possible with react-dates?

`import React, { useState, useEffect } from "react";
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DateRangePicker } from "react-dates";
import moment from "moment";
import { getLanguage } from "./getLanguage";

function DateRangeSelector(props) {
const language = getLanguage();

const { start, end } = props;

const [startDate, setstartDate] = useState(start || moment());
const [endDate, setendDate] = useState(end || null);
const [focusedInput, setfocusedInput] = useState(null);

const handleDateChange = ({ startDate, endDate }) => {
setstartDate(startDate);
setendDate(endDate);
};

const handleFocusChange = (focusedInput) => setfocusedInput(focusedInput);

return (
endDate={endDate}
endDateId="endDate"
numberOfMonths={1}
focusedInput={focusedInput}
isOutsideRange={() => null}
onDatesChange={handleDateChange}
onFocusChange={handleFocusChange}
startDate={startDate}
startDateId="startDate"
/>
);
}

export default DateRangeSelector;
`
I have a helper that gives me a language ("tr", "en", "de")

I couldnot find a way to achieve this. I can add a localization for "de" by simply adding "import 'moment/locale/de'". So how can I make it dynamically?

Most helpful comment

@sumeyradavran hey I just made small example on codesandbox. The main idea is to run moment.locale() with new language. Also you need to import moment/min/locales.min

All 2 comments

@sumeyradavran hey I just made small example on codesandbox. The main idea is to run moment.locale() with new language. Also you need to import moment/min/locales.min

@mmarkelov I can add now thank you 馃憤 . Maybe we can add it on docs.

Was this page helpful?
0 / 5 - 0 ratings