hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.59k stars 672 forks source link

Range input labels localization #391

Open fernandoeeu-g4 opened 4 years ago

fernandoeeu-g4 commented 4 years ago

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

SergeShkurko commented 3 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}
    />

image

AxelLR992 commented 2 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}
    />

image

Is there some workaround for TypeScript?