Параметр dateFormat

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

Flatpickr хранит дату в виде объекта Date, но взаимодействие с пользователем всегда происходит через строковое представление. Именно dateFormat задаёт правила этого преобразования.

Синтаксис и базовое использование

Параметр передаётся в объект конфигурации при инициализации:

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

В этом случае выбранная дата будет отображаться в формате:

2026-05-30

Flatpickr использует собственные токены форматирования, отличающиеся от стандартных форматов JavaScript и большинства библиотек локализации.

Основные токены форматирования

Формат даты строится из комбинации символов:

  • Y — год в четырёхзначном формате (2026)
  • y — последние две цифры года (26)
  • m — месяц с ведущим нулём (01–12)
  • n — месяц без ведущего нуля (1–12)
  • d — день месяца с ведущим нулём (01–31)
  • j — день месяца без ведущего нуля (1–31)

Пример:

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

Результат:

30.05.2026

Форматы с временем

Flatpickr поддерживает отображение времени при включённой опции enableTime.

Дополнительные токены:

  • H — часы в 24-часовом формате (00–23)
  • h — часы в 12-часовом формате (01–12)
  • i — минуты (00–59)
  • S — секунды (00–59)
  • K — AM/PM

Пример конфигурации:

flatpickr("#input", {
  enableTime: true,
  dateFormat: "Y-m-d H:i"
});

Вывод:

2026-05-30 14:45

При использовании 12-часового формата:

flatpickr("#input", {
  enableTime: true,
  dateFormat: "d-m-Y h:i K"
});

Результат:

30-05-2026 02:45 PM

Влияние dateFormat на ввод и парсинг

Flatpickr использует dateFormat не только для отображения, но и для разбора пользовательского ввода. Это означает, что строка, введённая вручную, интерпретируется строго согласно заданному формату.

Пример:

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

Корректный ввод:

30.05.2026

Некорректный ввод:

2026/05/30

Второй вариант будет считаться недопустимым, так как не соответствует шаблону.

Различие между dateFormat и altFormat

Часто dateFormat используется совместно с альтернативным отображением через altInput:

flatpickr("#input", {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

Поведение:

  • dateFormat — формат хранения и отправки данных
  • altFormat — формат отображения пользователю

Пример отображения:

May 30, 2026

При этом в исходном input сохраняется:

2026-05-30

Локализация и влияние формата

Хотя dateFormat не зависит напрямую от языка, он может комбинироваться с локалями:

flatpickr("#input", {
  locale: "ru",
  dateFormat: "j F Y"
});

Результат:

30 май 2026

Здесь F — название месяца, которое берётся из активной локали.

Форматы диапазонов дат

При использовании режима диапазона (mode: "range") dateFormat применяется к каждой дате и разделителю:

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

Вывод:

2026-05-01 to 2026-05-10

Разделитель to также может быть переопределён через параметр rangeSeparator.

Кастомные форматы и ограничения

Flatpickr не поддерживает произвольные форматы, как moment.js. Используются только встроенные токены. Попытка использовать сторонние обозначения приведёт к некорректному отображению:

dateFormat: "YYYY-MM-DD" // некорректно

Правильный вариант:

dateFormat: "Y-m-d"

Поведение при отсутствии dateFormat

Если параметр не указан, Flatpickr использует формат по умолчанию:

Y-m-d

То есть:

2026-05-30

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

Обработка крайних случаев

Несоответствие ввода

Если пользователь вводит строку, не соответствующую формату, значение не преобразуется в Date:

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

Ввод:

31-12-2026

Результат:

  • значение не валидируется
  • поле остаётся пустым или сохраняет предыдущее корректное значение

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

Любые символы, не относящиеся к токенам, воспринимаются как литералы:

dateFormat: "Y/m/d (дата)"

Вывод:

2026/05/30 (дата)

Совместимость с отправкой данных на сервер

dateFormat часто определяет формат, который отправляется в backend:

flatpickr("#input", {
  dateFormat: "Y-m-d",
  onChange: function(selectedDates, dateStr) {
    console.log(dateStr);
  }
});

dateStr уже содержит строку в заданном формате:

2026-05-30

Это упрощает интеграцию с API, так как не требуется дополнительное форматирование.

Особенности работы с несколькими датами

При mode: "multiple" значения сериализуются через разделитель запятой:

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

Вывод:

2026-05-01,2026-05-10,2026-05-20

Формат каждой даты остаётся строго заданным dateFormat.

Итоговые свойства поведения параметра

  • определяет отображение даты в input
  • задаёт формат парсинга пользовательского ввода
  • влияет на сериализацию данных
  • используется во всех режимах (single, range, multiple)
  • работает только с токенами Flatpickr
  • не зависит напрямую от JavaScript Date.toString()

Практические паттерны использования

// API-friendly формат
dateFormat: "Y-m-d"

// Человеко-читаемый формат
dateFormat: "d.m.Y"

// Формат с временем для логов
dateFormat: "Y-m-d H:i:S"

// Формат с текстовым месяцем
dateFormat: "j F Y"

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

Оглавление