Метод close

Метод close в экземпляре Flatpickr предназначен для программного закрытия календаря. Он управляет состоянием интерфейса компонента и переводит календарное окно в скрытое состояние, независимо от того, каким способом оно было открыто — через пользовательское взаимодействие или программно.

Сигнатура и базовое использование

Метод вызывается на экземпляре календаря:

fp.close();

где fp — экземпляр Flatpickr, возвращаемый после инициализации:

const fp = flatpickr("#dateInput", {
  // настройки
});

Поведение метода

При вызове close() происходит несколько внутренних действий:

  • скрывается DOM-элемент календаря
  • снимается активное состояние с инпута (если оно было установлено)
  • обновляются внутренние флаги состояния (isOpen = false)
  • прекращаются любые активные анимации открытия
  • сбрасывается фокус (в зависимости от конфигурации)

Метод работает синхронно и не требует callback-функций.

Влияние на состояние инпута

Flatpickr связывает открытие календаря с состоянием поля ввода. При закрытии через close():

  • input теряет фокус (если не переопределено настройками)
  • CSS-класс активности (.active) удаляется
  • aria-атрибуты обновляются для доступности

При этом значение input не изменяется, если не происходило выбора даты.

Закрытие при программном управлении

Метод используется для сценариев, где требуется внешнее управление календарём:

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

document.querySelector("#btnClose").addEventListener("click", () => {
  fp.close();
});

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

Взаимодействие с методом open

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

fp.open();
fp.close();

Повторный вызов close() при уже закрытом календаре не вызывает ошибок и не изменяет состояние.

Учет режима inline

В режиме inline: true календарь всегда отображается в DOM, поэтому:

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

вызов close():

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

Таким образом, метод теряет основную функцию, так как интерфейс всегда закреплён в разметке.

Закрытие при выборе даты

Если включены опции вроде closeOnSelect, календарь закрывается автоматически после выбора значения. В этом случае:

  • close() вызывается внутренне
  • пользовательский вызов может дублировать поведение
  • событие выбора даты завершает жизненный цикл открытия

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

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

const fp1 = flatpickr("#date1");
const fp2 = flatpickr("#date2");

fp1.close();

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

Связь с событиями

Метод close() триггерит соответствующие события жизненного цикла:

  • onClose — основной callback закрытия
  • внутренние события обновления состояния

Пример:

flatpickr("#date", {
  onClose: function(selectedDates, dateStr, instance) {
    console.log("Календарь закрыт");
  }
});

Важно учитывать, что onClose срабатывает как при пользовательском закрытии, так и при вызове close() программно.

Поведение при повторных вызовах

Повторные вызовы метода безопасны:

fp.close();
fp.close();

Состояние не ломается, DOM не перерисовывается повторно, обработчики не дублируются. Flatpickr проверяет текущее состояние перед выполнением операций.

Влияние конфигурации

Некоторые настройки влияют на результат закрытия:

clickOpens

Если отключено, открытие/закрытие контролируется только программно, и close() становится основным способом управления.

static

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

appendTo

Если календарь перенесён в другой контейнер, close() всё равно корректно скрывает его, так как управление идёт через внутренние ссылки на DOM.

Программные сценарии использования

Закрытие при потере фокуса формы

form.addEventListener("focusout", () => {
  fp.close();
});

Закрытие при сабмите

form.addEventListener("submit", () => {
  fp.close();
});

Закрытие при внешнем клике

document.addEventListener("click", (e) => {
  if (!e.target.closest(".flatpickr-calendar")) {
    fp.close();
  }
});

Особенности поведения в мобильных браузерах

На мобильных устройствах close():

  • закрывает виртуальный календарь Flatpickr
  • возвращает фокус на input (если не отключено)
  • может конфликтовать с системной клавиатурой, если input остаётся активным

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

При вызове метода выполняется логика, аналогичная:

  • проверке состояния isOpen
  • удалению/скрытию календарного контейнера
  • обновлению ARIA-состояний (aria-expanded)
  • очистке временных обработчиков событий, связанных с открытием

Типичные ошибки использования

  • вызов close() без сохранённого экземпляра Flatpickr
  • попытка управлять закрытием при inline: true
  • ожидание изменения значения input (метод не влияет на value)
  • использование в связке с кастомным DOM без учёта событий onClose

Совместимость с destroy

После вызова:

fp.destroy();

метод close() становится недоступным, так как экземпляр полностью уничтожается, включая DOM-ссылки и обработчики.

Оглавление