Translations?

[piekczyk]

Subject of the issue

Describe your issue here.

Is there a way to easily change translations?

Environment

Package Version: 1.0.3 React version: 3.4.0 Node version: 12 Browser: Brave

[chrisclausen90]

@piekczyk

import { de, enGB } from 'date-fns/locale';

and use property local

<DateRangePicker ranges={[{ startDate: new Date(startDate), endDate: new Date(endDate), key: 'selection', }]} locale={de} />

date-fns is generating the translations for the datepicker. date-fns is a peer dependency.

[mr-burhanuddin]

I am using DateRangePicker

https://codesandbox.io/s/great-browser-h9ghcp?file=/src/components/Calendar.jsx

only the calender Is Getting Translated Not the Left Menu of Today,thisWeek Etc is There A Way to Fix that

[mattvb91]

@mr-burhanuddin did you manage to find a fix?

[mr-burhanuddin]

@mr-burhanuddin did you manage to find a fix? @mattvb91 Yes !

Here is A Custom Hook **import { useEffect } from "react"; import { useTranslation } from "react-i18next";

function useTranslateCalendar(runTranslation: boolean): void { const { t } = useTranslation();

useEffect(() => { if (runTranslation) { const inputRanges = document.querySelectorAll(".rdrInputRanges"); inputRanges.forEach((inputRange) => { const spans = inputRange.querySelectorAll("span"); spans.forEach((span) => { const value = span.textContent; const translatedValue = typeof value === "string" ? ${t(value.replace(/\s/g, "").toLowerCase())} : ""; span.textContent = translatedValue; }); });

  const labelElements = document.querySelectorAll(".rdrStaticRangeLabel");
  labelElements.forEach((element) => {
    const value = element.textContent;

    const translatedValue =
      typeof value === "string"
        ? `${t(value.replace(/\s/g, "").toLowerCase())}`
        : "";
    element.textContent = translatedValue;
  });
}

}, [runTranslation, t]); }

export default useTranslateCalendar;**

Add The Keys Like this in translation.json files

"today": "Today", "yesterday": "Yesterday", "thisweek": "This Week", "lastweek": "Last Week", "thismonth": "This Month", "lastmonth": "Last Month", "daysuptotoday": "Days Upto Today", "daysstartingtoday": "Days Starting Today",

And Call The Hook it will Work

[mattvb91]

Awesome stuff thank you

[keremciu]

you don't need to hack anything, just create your own daterangepicker.

https://github.com/hypeserver/react-date-range/blob/master/src/components/DateRangePicker/index.js#L21

daterange picker is the composition of daterange and definedrange, create your custom ranges https://github.com/hypeserver/react-date-range/tree/master/src/components/DefinedRange#example-custom-range-labels

if you want the existing ones, you can copy from here https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js#L44 to change it to your version