Программная инициализация

Инициализация Flatpickr в программном режиме основана на прямом вызове фабричной функции flatpickr(), которая создаёт экземпляр календаря и связывает его с указанным DOM-элементом или набором элементов. Такой подход отличается от декларативного использования через атрибуты и позволяет полностью контролировать момент создания, конфигурацию и жизненный цикл компонента.

Базовый вызов flatpickr()

Основная форма инициализации реализуется через функцию:

flatpickr(target, options);

Где:

  • target — DOM-элемент, CSS-селектор или массив элементов
  • options — объект конфигурации

Простейший вариант привязки к input-элементу:

const input = document.querySelector("#dateInput");

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

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

Использование CSS-селекторов

В качестве цели может быть передана строка-селектор. Библиотека самостоятельно выполнит поиск элементов в DOM:

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

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

Инициализация набора элементов

Flatpickr поддерживает массовую инициализацию без необходимости ручного перебора:

flatpickr(".date-field", {
  weekNumbers: true
});

Каждый элемент с классом .date-field получает собственный независимый экземпляр. Внутренне библиотека итерирует NodeList и создаёт отдельные инстансы с изолированным состоянием.

Программное создание элемента

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

const input = document.createElement("input");
input.type = "text";
document.body.appendChild(input);

flatpickr(input, {
  defaultDate: "today"
});

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

Сохранение экземпляра

Функция flatpickr() возвращает объект-инстанс, предоставляющий API для управления календарём:

const fp = flatpickr("#dateInput", {
  enableTime: true
});

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

Основные возможности экземпляра:

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

Пример управления состоянием:

fp.open();
fp.setDate("2026-01-01");
fp.close();

Поздняя инициализация (lazy init)

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

let fpInstance = null;

function initDatepicker() {
  if (!fpInstance) {
    fpInstance = flatpickr("#dateInput", {
      dateFormat: "d.m.Y"
    });
  }
}

Такой паттерн предотвращает повторное создание экземпляра и снижает нагрузку на DOM при условной отрисовке компонентов.

Условная инициализация

Flatpickr может подключаться в зависимости от состояния приложения или данных:

if (document.querySelector("#dateInput")) {
  flatpickr("#dateInput", {
    minDate: "today"
  });
}

Это предотвращает ошибки в случае отсутствия целевого элемента и делает код устойчивым к изменению DOM-структуры.

Переинициализация экземпляра

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

let fp = flatpickr("#dateInput", {
  enableTime: true
});

// изменение настроек
fp.destroy();

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

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

Привязка к уже существующему DOM-узлу

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

window.addEventListener("DOMContentLoaded", () => {
  flatpickr("#dateInput", {
    allowInput: true
  });
});

Инициализация после загрузки DOM гарантирует корректную работу измерений, позиционирования и обработчиков событий.

Инициализация с пользовательской функцией-конфигуратором

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

function getConfig(type) {
  return {
    enableTime: type === "datetime",
    dateFormat: type === "datetime" ? "Y-m-d H:i" : "Y-m-d"
  };
}

flatpickr("#dateInput", getConfig("datetime"));

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

Работа с несколькими инстансами

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

const instances = flatpickr(".date-field", {
  dateFormat: "Y-m-d"
});

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

Отложенная инициализация через события

Программная модель позволяет запускать инициализацию по пользовательским событиям:

document.querySelector("#openCalendarBtn")
  .addEventListener("click", () => {
    flatpickr("#dateInput", {
      defaultDate: "today"
    });
  });

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

Передача уже существующего инстанса

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

const calendar = {
  instance: null,

  init() {
    this.instance = flatpickr("#dateInput", {
      weekNumbers: true
    });
  }
};

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

Оглавление