Open fernandoeeu-g4 opened 4 years ago
hot solution: sandbox
import DateRangePicker from "react-date-range/dist/components/DateRangePicker";
import ruLocale from "date-fns/locale/ru";
import {
defaultStaticRanges,
defaultInputRanges
} from "react-date-range/dist/defaultRanges";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
const staticRangesLabels = {
"Today": "Сегодня",
"Yesterday": "Вчера",
"This Week": "Эта неделя",
"Last Week": "Прошлая неделя",
"This Month": "Этот месяц",
"Last Month": "Прошлый месяц"
};
const inputRangesLabels = {
"days up to today": "дней до сегодня",
"days starting today": "дней после сегодня"
};
function translateRange(dictionary) {
return (item) =>
dictionary[item.label] ? { ...item, label: dictionary[item.label] } : item;
}
const ruStaticRanges = defaultStaticRanges.map(translateRange(staticRangesLabels));
const ruInputRanges = defaultInputRanges.map(translateRange(inputRangesLabels));
// -------
<DateRangePicker
locale={ruLocale}
staticRanges={ruStaticRanges}
inputRanges={ruInputRanges}
/>
hot solution: sandbox
import DateRangePicker from "react-date-range/dist/components/DateRangePicker"; import ruLocale from "date-fns/locale/ru"; import { defaultStaticRanges, defaultInputRanges } from "react-date-range/dist/defaultRanges"; import "react-date-range/dist/styles.css"; import "react-date-range/dist/theme/default.css"; const staticRangesLabels = { "Today": "Сегодня", "Yesterday": "Вчера", "This Week": "Эта неделя", "Last Week": "Прошлая неделя", "This Month": "Этот месяц", "Last Month": "Прошлый месяц" }; const inputRangesLabels = { "days up to today": "дней до сегодня", "days starting today": "дней после сегодня" }; function translateRange(dictionary) { return (item) => dictionary[item.label] ? { ...item, label: dictionary[item.label] } : item; } const ruStaticRanges = defaultStaticRanges.map(translateRange(staticRangesLabels)); const ruInputRanges = defaultInputRanges.map(translateRange(inputRangesLabels)); // ------- <DateRangePicker locale={ruLocale} staticRanges={ruStaticRanges} inputRanges={ruInputRanges} />
Is there some workaround for TypeScript?
Subject of the issue
Translate range input labels
I would like to know how can I change those labels' strings (https://i.imgur.com/OP16Gbm.png), so they can match with the calendar localization.
Environment
Package Version: ^1.0.3 React version: ^16.13.1 Node version: 12.16.1 Browser: Chrome 83.0.4103.116