Привязка к элементу input

Привязка календаря осуществляется через передачу DOM-элемента или селектора в функцию инициализации. Базовый механизм работы Flatpickr построен вокруг концепции «оборачивания» стандартного <input> с последующим расширением его поведения без изменения структуры формы.

Наиболее распространённый способ подключения — передача CSS-селектора строки:

flatpickr("#dateInput");

В этом случае библиотека находит элемент через document.querySelector и инициализирует календарь непосредственно на найденном поле ввода.

HTML-структура:

<input type="text" id="dateInput">

После инициализации input остаётся стандартным DOM-элементом, но получает дополнительные свойства, события и UI-компонент календаря.

Привязка через DOM-элемент

Альтернативный вариант — передача уже найденного элемента:

const input = document.getElementById("dateInput");

flatpickr(input);

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

Массовая инициализация нескольких input

Flatpickr поддерживает инициализацию на коллекции элементов через querySelectorAll:

document.querySelectorAll(".date-input").forEach(el => {
  flatpickr(el);
});

HTML:

<input class="date-input" type="text">
<input class="date-input" type="text">
<input class="date-input" type="text">

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

Использование селекторов по атрибутам

Удобный вариант — привязка через data- атрибуты:

<input type="text" data-calendar>
flatpickr("[data-calendar]");

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

Привязка с конфигурацией через второй аргумент

Привязка input почти всегда сопровождается конфигурацией:

flatpickr("#dateInput", {
  dateFormat: "Y-m-d",
  allowInput: true
});

В этом случае input становится не только точкой подключения UI, но и источником данных, формат которых строго контролируется настройками.

Влияние типа input

Несмотря на то, что календарь чаще применяется к type="text", возможна работа и с другими типами:

<input type="date" id="dateInput">
flatpickr("#dateInput", {
  disableMobile: true
});

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

Поведение input после инициализации

После привязки input сохраняет свою базовую роль, но:

  • значение управляется через API Flatpickr
  • формат отображения может отличаться от формата хранения
  • возможна синхронизация с альтернативным полем

Пример:

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

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

Использование readonly при привязке

Часто input делают readonly, чтобы исключить ручной ввод:

<input type="text" id="dateInput" readonly>

Это предотвращает ввод некорректных значений и заставляет пользователя использовать календарь как единственный источник выбора даты.

Поведение allowInput

Если требуется разрешить ручной ввод, используется:

flatpickr("#dateInput", {
  allowInput: true
});

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

Привязка к динамически создаваемым input

В интерфейсах, где элементы создаются после загрузки страницы, инициализация выполняется после добавления узла в DOM:

const input = document.createElement("input");
input.type = "text";
input.className = "date-input";

document.body.appendChild(input);

flatpickr(input);

Важно, что инициализация должна происходить после вставки элемента в DOM, иначе селектор не найдёт узел.

Повторная инициализация и destroy

Если input переинициализируется, предыдущий экземпляр необходимо уничтожить:

const fp = flatpickr("#dateInput");

fp.destroy();

flatpickr("#dateInput");

Это критично в SPA-приложениях, где компоненты могут пересоздаваться при навигации.

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

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

Привязка через обёртку элементов

Flatpickr может работать не только с input, но и с обёртками, внутри которых находится поле:

<div class="date-wrapper">
  <input type="text">
</div>
flatpickr(".date-wrapper input");

Это позволяет гибко интегрировать календарь в сложные UI-компоненты.

Альтернативное поле отображения (altInput)

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

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

В этом режиме:

  • оригинальный input хранит технический формат
  • пользователь взаимодействует с альтернативным отображением
  • привязка сохраняется к исходному DOM-элементу

Привязка в формах и отправка данных

При использовании в формах input остаётся стандартным элементом:

<form>
  <input id="dateInput" name="date">
  <button type="submit">Send</button>
</form>

Flatpickr не изменяет механизм отправки формы, а лишь управляет значением поля.

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

При отправке формы сервер получает строку в указанном формате.

Работа с несколькими полями даты

При необходимости синхронизации нескольких input (например, диапазона дат), каждый элемент привязывается отдельно:

<input id="startDate">
<input id="endDate">
flatpickr("#startDate");
flatpickr("#endDate");

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

Делегирование и контейнерная инициализация

В сложных интерфейсах применяется подход инициализации внутри контейнера:

document.querySelectorAll(".form-section").forEach(section => {
  section.querySelectorAll("input.date").forEach(input => {
    flatpickr(input);
  });
});

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

Особенности работы с name и form serialization

Flatpickr не вмешивается в атрибут name, что делает привязку совместимой с любыми механизмами сериализации:

<input id="dateInput" name="birthday">

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

Привязка в сочетании с кастомными событиями

После инициализации можно отслеживать изменения через события:

flatpickr("#dateInput", {
  onChange: function(selectedDates, dateStr, instance) {
    console.log(dateStr);
  }
});

События привязываются к конкретному input-экземпляру, что упрощает реакцию на пользовательский ввод без глобальных обработчиков.

Работа с отключением input

При необходимости input может быть временно деактивирован:

const fp = flatpickr("#dateInput");

fp.set("disable", [
  new Date(2026, 0, 1)
]);

Хотя это не влияет на саму привязку, поведение UI остаётся связанным с исходным input-элементом.

Инициализация через data-конфигурацию

Flatpickr поддерживает декларативную привязку через атрибуты:

<input data-input data-date-format="Y-m-d">
flatpickr("[data-input]");

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

Контекст привязки и жизненный цикл DOM

Ключевой аспект работы с input — соответствие жизненного цикла DOM и экземпляра календаря. Элемент должен существовать в момент инициализации, иначе привязка будет невозможна. В динамических приложениях это требует строгого контроля порядка операций: создание узла, вставка в DOM, затем инициализация Flatpickr.

Оглавление