Настройка через параметр locale

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

Параметр locale может быть задан в нескольких формах:

  • строка (ключ локали, например "ru", "en", "de")
  • объект локализации
  • подключённый модуль локали из пакета Flatpickr

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

Пример установки локали строкой:

flatpickr("#input", {
  locale: "ru"
});

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

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

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

Пример подключения русской локали:

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

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

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

Структура объекта локали

Объект локали содержит набор свойств, определяющих отображение календаря:

  • firstDayOfWeek — первый день недели
  • weekdays — названия дней недели
  • months — названия месяцев
  • ordinal — суффиксы порядковых чисел
  • rangeSeparator — разделитель диапазона дат
  • scrollTitle — подсказка прокрутки
  • toggleTitle — подсказка переключения

Пример структуры:

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

Приоритеты применения локали

Flatpickr использует иерархию выбора локали:

  1. Локаль, переданная напрямую в инициализации
  2. Локаль по умолчанию, установленная глобально
  3. Встроенная локаль default

Глобальная установка выполняется через:

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

flatpickr.localize(Russian);

После вызова все последующие экземпляры календаря используют указанную локаль, если не переопределено локально.

Переключение локали динамически

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

Пример:

const fp = flatpickr("#input", {
  locale: "en"
});

fp.set("locale", "ru");

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

Форматирование дат в зависимости от locale

Хотя основное форматирование дат задаётся параметром dateFormat, локаль влияет на вспомогательные элементы отображения и может косвенно влиять на восприятие формата.

Пример:

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

В данном случае:

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

firstDayOfWeek и региональные особенности

Одним из ключевых параметров локали является firstDayOfWeek. Он определяет, с какого дня начинается календарная неделя.

Типичные значения:

  • 0 — воскресенье (США, часть англоязычных стран)
  • 1 — понедельник (большинство стран Европы)

Пример:

const ru = {
  firstDayOfWeek: 1
};

Этот параметр особенно важен для корректного восприятия календаря в корпоративных и локализованных интерфейсах.

Кастомные локали

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

  • специфических терминологических требованиях
  • внутренних корпоративных системах
  • упрощённых интерфейсах

Пример минимальной кастомной локали:

const minimalLocale = {
  weekdays: {
    longhand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    shorthand: ["S", "M", "T", "W", "T", "F", "S"]
  },
  months: {
    longhand: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    shorthand: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  firstDayOfWeek: 0
};

Такой объект может быть передан напрямую в конфигурацию.

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

При проектировании интерфейсов важно разделять:

  • локализацию интерфейса (locale)
  • формат отображения даты (dateFormat)
  • внутреннее хранение даты (объект Date)

Flatpickr всегда оперирует объектом Date внутри, а локаль влияет только на представление.

Пример:

flatpickr("#input", {
  locale: "ru",
  dateFormat: "Y-m-d"
});

Пользователь видит локализованный интерфейс, но значение сохраняется в ISO-совместимом формате.

Поведение placeholder и вспомогательных текстов

Некоторые элементы интерфейса берут значения из локали:

  • подсказки для навигации по календарю
  • текстовые кнопки
  • вспомогательные tooltip-элементы

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

Обработка отсутствующих переводов

Если локаль неполная, Flatpickr применяет стратегию каскадного заполнения:

  • проверка ключа в текущей локали
  • использование английской локали по умолчанию
  • использование встроенных значений библиотеки

Это предотвращает появление пустых или некорректных элементов интерфейса.

Расширение существующих локалей

Часто требуется не полная замена, а частичная модификация локали. Это реализуется через расширение объекта:

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

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

flatpickr("#input", {
  locale: extendedRussian
});

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

Влияние locale на UX календаря

Локализация напрямую влияет на:

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

Особенно критично это в формах бронирования, финансовых системах и корпоративных интерфейсах, где ошибка интерпретации даты может привести к некорректным данным.

Совместимость с другими параметрами Flatpickr

locale взаимодействует с другими параметрами конфигурации:

  • altInput — альтернативное отображение может наследовать локаль
  • mode — режим диапазона использует rangeSeparator
  • enableTime — временные элементы остаются локализуемыми через форматирование UI

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

Оглавление