Подключение языковых пакетов

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

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

Структура языковых пакетов

Каждый языковой пакет представляет собой JavaScript-объект, содержащий набор параметров:

  • названия дней недели в сокращённой и полной форме
  • названия месяцев
  • первый день недели
  • элементы форматирования дат
  • служебные текстовые строки интерфейса

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

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

Подключение локалей через npm

При использовании сборщиков модулей (Webpack, Vite, Rollup) локали импортируются отдельно из пакета Flatpickr:

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

После импорта объект локали становится доступен для передачи в конфигурацию.

Использование локали в инициализации

Локализация применяется через параметр locale при создании экземпляра календаря:

flatpickr("#date", {
  locale: Russian
});

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

Подключение нескольких языков

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

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

const locales = {
  ru: Russian,
  fr: French
};

flatpickr("#date", {
  locale: locales["ru"]
});

Такой подход позволяет централизованно управлять языковыми настройками приложения.

Изменение локали после инициализации

Flatpickr поддерживает смену языка без пересоздания экземпляра через метод set():

const calendar = flatpickr("#date", {
  locale: Russian
});

calendar.set("locale", French);

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

Локализация через CDN

При подключении через CDN локали загружаются отдельными скриптами:

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ru.js"></script>

После подключения локаль становится доступной через глобальный объект:

flatpickr("#date", {
  locale: flatpickr.l10ns.ru
});

Дефолтная локализация

Глобальная локаль может быть установлена один раз для всего приложения:

flatpickr.localize(flatpickr.l10ns.ru);

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

Форматы дат и локаль

Локализация влияет не только на отображение текста, но и на интерпретацию дат. Особенно это важно при работе с пользовательским вводом.

flatpickr("#date", {
  locale: Russian,
  dateFormat: "d.m.Y"
});

Формат даты часто комбинируется с локалью для соответствия региональным стандартам отображения.

Кастомизация существующей локали

Локали можно модифицировать, расширяя или переопределяя значения:

const customRussian = {
  ...Russian,
  firstDayOfWeek: 0,
  rangeSeparator: " до "
};

flatpickr("#date", {
  locale: customRussian
});

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

Ленивая загрузка локалей

В крупных приложениях локали часто загружаются по требованию для уменьшения размера бандла:

async function loadLocale(locale) {
  switch (locale) {
    case "ru":
      return import("flatpickr/dist/l10n/ru.js");
    case "de":
      return import("flatpickr/dist/l10n/de.js");
  }
}

loadLocale("ru").then(module => {
  flatpickr("#date", {
    locale: module.Russian
  });
});

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

Особенности работы с tree-shaking

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

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

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

Совместимость локалей с форматированием

Flatpickr использует локаль совместно с системой форматирования дат date-fns-подобного синтаксиса. Важно учитывать, что локаль влияет только на визуальное представление, тогда как формат даты управляет структурой строки:

  • локаль отвечает за язык интерфейса
  • формат определяет порядок и вид компонентов даты
flatpickr("#date", {
  locale: Russian,
  dateFormat: "l, d F Y"
});
Оглавление