altInput и altFormat

Параметры altInput и altFormat относятся к механизмам отображения даты в Flatpickr и позволяют разделить внутреннее значение поля и визуальное представление даты для пользователя.

По умолчанию Flatpickr использует одно и то же значение одновременно для хранения данных и для отображения. Если задан формат Y-m-d, то именно такой текст будет находиться в поле ввода:

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

После выбора даты пользователь увидит:

2026-05-15

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

Параметр altInput

altInput включает создание дополнительного текстового поля, которое отображается пользователю вместо исходного элемента.

flatpickr("#date", {
    altInput: true
});

После активации происходит следующее:

  1. Исходное поле остается в DOM.
  2. Исходное поле становится скрытым.
  3. Flatpickr создает новый элемент <input>.
  4. Пользователь работает с новым полем.
  5. Оригинальное поле продолжает хранить значение для отправки формы.

Схематично это выглядит так:

<input type="hidden" name="date" value="2026-05-15">

<input type="text" value="15 мая 2026">

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

Как работает скрытое поле

Рассмотрим конфигурацию:

flatpickr("#date", {
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d.m.Y"
});

При выборе даты:

15 мая 2026

в скрытом поле будет сохранено:

2026-05-15

Если форма отправляется на сервер, передается именно значение из оригинального элемента.

Это особенно важно для:

  • баз данных;
  • REST API;
  • серверной валидации;
  • интеграции с backend-фреймворками;
  • хранения дат в стандартизированном формате.

Параметр altFormat

altFormat определяет формат отображения даты в альтернативном поле.

Используется только совместно с altInput.

Пример:

flatpickr("#date", {
    altInput: true,
    altFormat: "d.m.Y"
});

Результат отображения:

15.05.2026

Если параметр не указан, Flatpickr использует собственный формат по умолчанию.

Чаще всего altFormat задается явно для полного контроля над отображением.

Связь между dateFormat и altFormat

Наиболее важный момент заключается в том, что эти параметры выполняют разные задачи.

dateFormat

Определяет формат хранения значения.

dateFormat: "Y-m-d"

Результат:

2026-05-15

altFormat

Определяет формат отображения.

altFormat: "d.m.Y"

Результат:

15.05.2026

Полная конфигурация:

flatpickr("#date", {
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d.m.Y"
});

Пользователь видит:

15.05.2026

Сервер получает:

2026-05-15

Практический пример для форм

Одна из самых распространенных схем:

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

Отображение:

15 May 2026

Передаваемое значение:

2026-05-15

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

  • удобство ввода;
  • корректную обработку данных;
  • единый формат хранения.

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

altFormat поддерживает все токены форматирования Flatpickr.

Пример:

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

Результат:

Friday, 15 May 2026

Такой формат часто применяется:

  • в системах бронирования;
  • календарях мероприятий;
  • CRM-системах;
  • интерфейсах управления событиями.

Отображение месяца словами

Часто используется следующий вариант:

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

Результат:

15 May 2026

Преимущества:

  • дата легче воспринимается;
  • снижается вероятность путаницы между месяцем и днем;
  • повышается читаемость интерфейса.

Использование времени

altFormat работает не только с датой, но и со временем.

Пример:

flatpickr("#meeting", {
    enableTime: true,
    altInput: true,
    dateFormat: "Y-m-d H:i",
    altFormat: "d.m.Y H:i"
});

Отображение:

15.05.2026 14:30

Скрытое значение:

2026-05-15 14:30

Работа с 12-часовым временем

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

flatpickr("#meeting", {
    enableTime: true,
    time_24hr: false,
    altInput: true,
    dateFormat: "Y-m-d H:i",
    altFormat: "F j, Y h:i K"
});

Результат:

May 15, 2026 02:30 PM

При этом сервер по-прежнему получает значение в формате, указанном в dateFormat.

Локализация и altFormat

Особенно полезным параметр становится при использовании локалей.

Пример:

flatpickr("#date", {
    locale: "ru",
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d F Y"
});

Отображение:

15 мая 2026

Хранимое значение:

2026-05-15

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

Стилизация альтернативного поля

Создаваемый элемент наследует классы исходного поля.

Исходная разметка:

<input
    id="date"
    class="form-control custom-date"
/>

Конфигурация:

flatpickr("#date", {
    altInput: true
});

Сгенерированное альтернативное поле также получает соответствующие CSS-классы.

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

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

Для альтернативного поля можно добавить собственный класс.

flatpickr("#date", {
    altInput: true,
    altInputClass: "pretty-date"
});

После создания элемента класс будет добавлен автоматически.

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

Комбинирование с минимальной и максимальной датой

Параметры не конфликтуют с ограничениями диапазона.

flatpickr("#date", {
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d F Y",
    minDate: "today",
    maxDate: "2026-12-31"
});

Пользователь видит красивую дату:

15 мая 2026

Но ограничения продолжают работать относительно фактического значения.

Использование с режимом диапазона

В режиме выбора периода возможности остаются такими же.

flatpickr("#range", {
    mode: "range",
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d.m.Y"
});

Отображение:

01.05.2026 to 15.05.2026

Внутреннее значение:

2026-05-01 to 2026-05-15

Это особенно удобно для систем бронирования и отчетности.

Типичные сценарии применения

Хранение ISO-формата

dateFormat: "Y-m-d"
2026-05-15

Отображение:

altFormat: "d.m.Y"
15.05.2026

Отображение полной даты

altFormat: "l, d F Y"

Результат:

Friday, 15 May 2026

Красивое отображение даты и времени

altFormat: "d F Y H:i"

Результат:

15 May 2026 14:30

Интерфейсы бронирования

flatpickr("#booking", {
    enableTime: true,
    altInput: true,
    dateFormat: "Y-m-d H:i",
    altFormat: "d F Y, H:i"
});

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

Частые ошибки

Использование altFormat без altInput

Неправильно:

flatpickr("#date", {
    altFormat: "d.m.Y"
});

Параметр не окажет ожидаемого эффекта, поскольку альтернативное поле не создается.

Правильно:

flatpickr("#date", {
    altInput: true,
    altFormat: "d.m.Y"
});

Одинаковые значения dateFormat и altFormat

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

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

Слишком сложный формат отображения

Пример:

altFormat: "l, F d, Y h:i K"

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

Обычно предпочтительнее использовать краткие и легко читаемые форматы:

altFormat: "d.m.Y"

или

altFormat: "d F Y"

Внутренний механизм работы

После инициализации Flatpickr:

flatpickr("#date", {
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d.m.Y"
});

происходит следующая последовательность действий:

  1. Создается экземпляр календаря.
  2. Исходный элемент скрывается.
  3. Создается дополнительный текстовый input.
  4. Значение даты сохраняется в формате dateFormat.
  5. Отображение формируется по правилам altFormat.
  6. При каждом изменении даты оба значения синхронизируются автоматически.

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

Оглавление