Форматирование дня, месяца, года

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

Строка формата представляет собой последовательность символов и специальных токенов:

dateFormat: "d.m.Y"

Любой символ, не являющийся токеном, выводится как есть. Токены заменяются значениями даты.

Ключевая особенность системы — строгое различие между числовыми и текстовыми представлениями, а также между вариантами с ведущими нулями и без них.


Форматирование дня

Основные токены дня

  • d — день месяца с ведущим нулём Пример: 01, 09, 23

  • j — день месяца без ведущего нуля Пример: 1, 9, 23

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

Расширенные токены дня недели

  • D — краткое название дня недели Пример: Mon, Tue, Wed

  • l (строчная L) — полное название дня недели Пример: Monday, Tuesday, Wednesday

Эти токены зависят от локали и могут меняться при смене языка интерфейса.


Форматирование месяца

Числовое представление месяца

  • m — месяц с ведущим нулём Пример: 01 — январь, 12 — декабрь

  • n — месяц без ведущего нуля Пример: 1 — январь, 12 — декабрь

Числовые токены используются при интеграции с API и серверными системами, где важна строгая структура даты.


Текстовое представление месяца

  • M — краткое название месяца Пример: Jan, Feb, Mar

  • F — полное название месяца Пример: January, February, March

Текстовые формы полностью зависят от локализации и параметра locale.


Форматирование года

Основные токены года

  • Y — полный год (4 цифры) Пример: 2026, 1998

  • y — сокращённый год (2 цифры) Пример: 26, 98

Использование y может приводить к неоднозначности при работе с историческими или долгосрочными данными, поэтому предпочтение обычно отдаётся Y.


Комбинирование токенов

Форматирование даты в Flatpickr строится через объединение токенов в одной строке:

Примеры комбинаций

  • d.m.Y30.05.2026
  • j F Y30 May 2026
  • D, j M YSat, 30 May 2026
  • l, d F YSaturday, 30 May 2026

Разделители (точки, пробелы, запятые) не интерпретируются как часть формата и выводятся напрямую.


Экранирование символов

Если необходимо вывести символ, который совпадает с токеном, используется обратный слэш:

dateFormat: "d \\d\\e F \\m\\e\\s\\y\\a\\c\\a Y"

Пример результата:

30 de May mesyaca 2026

Любой символ после \ воспринимается как литерал.


Поведение при локализации

Форматирование месяцев и дней недели зависит от настроек locale.

  • Английская локаль: January, Monday
  • Русская локаль: Январь, Понедельник
  • Французская локаль: janvier, lundi

Числовые токены (d, m, Y) не зависят от языка и остаются неизменными.


Практические паттерны форматирования

Европейский формат даты

d.m.Y

Используется в большинстве стран Европы.

Американский формат

m/d/Y

Полный текстовый формат

l, F j, Y

Компактный ISO-подобный формат

Y-m-d

Особенности отображения и хранения

Формат dateFormat влияет только на отображение в input-поле. Внутреннее значение даты в Flatpickr хранится как объект Date JavaScript, что позволяет:

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

Различие между отображением и вводом

При включённом ручном вводе формат строки определяет:

  • как пользователь видит дату
  • как библиотека парсит введённый текст

Несовпадение формата и реального ввода приводит к ошибкам парсинга, особенно при использовании текстовых месяцев (F, M), где локализация критична.


Типичные ошибки при форматировании

  • Использование mm вместо m (в Flatpickr нет отдельного токена с двойным смыслом)
  • Смешивание числовых и текстовых форм без разделителей
  • Игнорирование локали при использовании F, M, D, l
  • Попытка использовать стандартные форматы Moment.js (DD/MM/YYYY как единственный источник без адаптации токенов Flatpickr)

Итоговая логика построения формата

Система форматирования даты в Flatpickr опирается на три слоя:

  • день (d, j, D, l)
  • месяц (m, n, M, F)
  • год (Y, y)

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