Получение экземпляра Flatpickr

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

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

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

Результатом выполнения является объект экземпляра Flatpickr, содержащий состояние и методы управления. Внутри он связан с конкретным DOM-элементом и хранит всю внутреннюю конфигурацию.

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

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

Наиболее стабильный способ дальнейшей работы — явное сохранение ссылки при инициализации. Такой подход исключает необходимость повторного поиска или обращения к DOM для получения состояния календаря.

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

calendar.setDate("2026-01-01");
calendar.open();

Сохранённый экземпляр становится основным управляющим объектом. Через него доступен полный API Flatpickr, включая управление датами, режимами и событиями.

Структура экземпляра включает:

  • текущую выбранную дату или массив дат
  • ссылку на связанный input-элемент
  • конфигурацию, переданную при инициализации
  • внутренние служебные состояния (открыт/закрыт, режим выбора и др.)

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

В ситуациях, когда ссылка на экземпляр не сохранена, доступ к нему возможен через сам DOM-элемент. Flatpickr привязывает инстанс к элементу через скрытое свойство:

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

instance.clear();
instance.open();

Свойство _flatpickr содержит объект экземпляра после успешной инициализации.

Особенности доступа через DOM:

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

Обработка множественных элементов

При инициализации Flatpickr на коллекции элементов возвращается массив экземпляров:

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

Каждый элемент коллекции получает собственный независимый экземпляр. Управление осуществляется через массив:

instances.forEach(instance => {
  instance.setDate("2026-05-30");
});

Особенности множественной инициализации:

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

Проверка существования экземпляра

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

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

if (input._flatpickr) {
  input._flatpickr.destroy();
}

Такой подход предотвращает повторную инициализацию и конфликт состояний.

Альтернативный сценарий — контроль через внешний флаг:

if (!input.dataset.fpInitialized) {
  flatpickr(input);
  input.dataset.fpInitialized = "true";
}

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

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

Основные методы управления:

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

// установка даты
fp.setDate("2026-06-01");

// открытие календаря
fp.open();

// закрытие календаря
fp.close();

// очистка значения
fp.clear();

// уничтожение экземпляра
fp.destroy();

После вызова destroy() ссылка становится неактуальной, а привязка к DOM удаляется.

Перезапись и повторная инициализация

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

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

if (input._flatpickr) {
  input._flatpickr.destroy();
}

const fp = flatpickr(input, {
  enableTime: true
});

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

Работа с экземпляром внутри событий

Экземпляр передаётся в обработчики событий Flatpickr, что позволяет работать с ним без внешних ссылок:

flatpickr("#dateInput", {
  onChange: function(selectedDates, dateStr, instance) {
    instance.setDate(selectedDates[0]);
  }
});

Здесь instance — полноценный объект текущего календаря, идентичный тому, который возвращается при инициализации.

Доступ к экземпляру через глобальную инициализацию

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

const calendars = new Map();

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

Такой подход позволяет:

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

Особенности жизненного цикла экземпляра

Экземпляр Flatpickr проходит несколько стадий:

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

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

Типичные ошибки при работе с экземпляром

Часто встречающиеся проблемы связаны с потерей или неправильным использованием ссылки:

  • повторная инициализация без destroy
  • обращение к _flatpickr до инициализации
  • хранение устаревших ссылок после удаления DOM-элемента
  • работа с экземпляром после его уничтожения

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

Оглавление