Переопределение отдельных строк

Flatpickr хранит все текстовые строки интерфейса в объекте локализации, что позволяет точечно переопределять любые элементы без необходимости переписывать весь набор языковых данных. Такая модель особенно полезна при адаптации интерфейса под корпоративные стандарты, специфические формулировки или частичную локализацию, когда требуется изменить только отдельные фразы, оставив остальную часть языка нетронутой.

Каждая локаль в Flatpickr представляет собой объект с предсказуемой структурой. Внутри него находятся строки интерфейса, параметры форматирования и наборы подписей для календаря и времени.

Ключевые группы строк включают:

  • названия месяцев и дней недели;
  • сокращённые формы дней;
  • текстовые элементы управления (например, «очистить», «сегодня»);
  • служебные строки для диапазонов дат;
  • форматирование времени и 24-часовой режим.

Пример общей структуры локали:

const ruLocale = {
  weekdays: {
    shorthand: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
    longhand: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"]
  },
  months: {
    shorthand: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
    longhand: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]
  },
  firstDayOfWeek: 1
};

Flatpickr не требует обязательного переопределения всей структуры. Любое поле может быть изменено точечно, что и является ключевым механизмом кастомизации.

Принцип точечного переопределения

Переопределение отдельных строк выполняется через расширение или модификацию существующего объекта локали. Важно, что Flatpickr не копирует локаль «глубоко» автоматически при изменениях, поэтому используется явное расширение через spread-оператор или Object.assign.

Подход с расширением:

import flatpickr from "flatpickr";
import { Russian } from "flatpickr/dist/l10n/ru.js";

const customRu = {
  ...Russian,
  weekdays: {
    ...Russian.weekdays,
    longhand: Russian.weekdays.longhand.map((d, i) =>
      i === 0 ? "Воскресенье (выходной)" : d
    )
  }
};

В данном примере изменяется только одна строка внутри массива longhand, остальные элементы сохраняются без изменений. Такой подход минимизирует риск нарушения структуры локализации.

Переопределение отдельных элементов массива

Наиболее частая задача — замена конкретного дня недели или месяца. Flatpickr использует массивы фиксированной длины, поэтому корректировка требует соблюдения индексов.

Пример изменения названия одного месяца:

const customMonths = {
  ...Russian.months,
  longhand: Russian.months.longhand.map((m, index) =>
    index === 4 ? "Май (праздничный месяц)" : m
  )
};

Здесь изменяется только пятый элемент массива (май), остальные значения остаются неизменными. Такой метод предпочтительнее полного переопределения массива, так как сохраняет совместимость с обновлениями библиотеки.

Изменение служебных строк интерфейса

Помимо календарных данных, Flatpickr содержит строки управления интерфейсом, которые часто требуется адаптировать под продуктовую терминологию.

Ключевые строки:

  • weekAbbreviation — сокращение «нед.»;
  • rangeSeparator — разделитель диапазона дат;
  • scrollTitle — подсказка при прокрутке времени;
  • toggleTitle — переключение режима ввода времени.

Пример частичного переопределения:

const customLocale = {
  ...Russian,
  rangeSeparator: " → ",
  weekAbbreviation: "нед",
  toggleTitle: "Переключить режим ввода времени",
  scrollTitle: "Используйте прокрутку для изменения"
};

Такая модификация не затрагивает остальную локализацию, что позволяет гибко адаптировать интерфейс под UX-дизайн конкретного приложения.

Переопределение строк через глобальную локаль

Flatpickr позволяет изменять локализацию глобально, воздействуя на все экземпляры календаря. Это достигается через setDefaults.

import flatpickr from "flatpickr";
import { Russian } from "flatpickr/dist/l10n/ru.js";

flatpickr.setDefaults({
  locale: {
    ...Russian,
    rangeSeparator: " до ",
    firstDayOfWeek: 1
  }
});

В этом случае каждое новое поле ввода будет использовать изменённые строки без необходимости повторной передачи конфигурации.

Приоритет локализационных значений

Flatpickr использует многоуровневую систему приоритетов:

  1. Локаль, переданная в конкретный экземпляр.
  2. Локаль, заданная через setDefaults.
  3. Локаль по умолчанию библиотеки.

Это означает, что точечные переопределения на уровне инстанса всегда имеют более высокий приоритет, чем глобальные настройки.

flatpickr("#input", {
  locale: {
    ...Russian,
    rangeSeparator: " — "
  }
});

Даже при наличии глобальной локализации, этот инстанс будет использовать собственное значение rangeSeparator.

Работа с динамическими изменениями строк

В некоторых случаях требуется менять строки во время выполнения приложения. Flatpickr не требует пересоздания объекта локали — достаточно обновить ссылку и переинициализировать экземпляр.

const localeVariantA = {
  ...Russian,
  rangeSeparator: " до "
};

const localeVariantB = {
  ...Russian,
  rangeSeparator: " → "
};

let fp = flatpickr("#input", {
  locale: localeVariantA
});

fp.set("locale", localeVariantB);

При смене локали календарь перерисовывает интерфейс с новыми строками без потери выбранных данных.

Особенности работы с вложенными структурами

Локализация Flatpickr содержит вложенные объекты, поэтому поверхностное копирование недостаточно при глубокой модификации. Ошибки часто возникают при попытке изменить только родительский объект без копирования внутренних массивов.

Некорректный подход:

const badLocale = {
  ...Russian,
  weekdays: Russian.weekdays
};

badLocale.weekdays.longhand[0] = "Ошибка";

Здесь происходит мутация исходного объекта, что может повлиять на другие части приложения.

Корректный подход требует полного копирования вложенных структур:

const safeLocale = {
  ...Russian,
  weekdays: {
    shorthand: [...Russian.weekdays.shorthand],
    longhand: [...Russian.weekdays.longhand]
  }
};

Только после этого допускается изменение конкретных элементов без риска побочных эффектов.

Переопределение строк без использования готовых локалей

Flatpickr допускает создание локали с нуля, если требуется полный контроль над строками интерфейса. В таком случае переопределяются только необходимые поля, остальные могут быть заполнены минимально.

const minimalLocale = {
  firstDayOfWeek: 1,
  weekdays: {
    shorthand: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
    longhand: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]
  },
  months: {
    shorthand: ["Ян", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
    longhand: ["Ян", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"]
  }
};

Такой подход используется в случаях, когда требуется не перевод, а упрощённый интерфейс или брендированные подписи.

Стабильность и обновляемость локализаций

При переопределении отдельных строк важно учитывать, что обновления Flatpickr могут расширять структуру локалей. Использование частичных переопределений через spread-операторы позволяет автоматически наследовать новые поля без необходимости ручного обновления кода.

Это делает точечную модификацию предпочтительным способом кастомизации по сравнению с полным копированием локалей.

Оглавление