Событие onClose

Общая концепция события

onClose — это событие библиотеки Flatpickr, которое срабатывает в момент закрытия календаря. Закрытие происходит независимо от причины: выбор даты, нажатие вне компонента, использование клавиши Escape или программное вызовы методов API.

Событие относится к группе lifecycle-событий и фиксирует финальный этап взаимодействия пользователя с календарём в рамках одного открытия виджета.

Сигнатура и параметры

Событие onClose вызывается с тремя основными параметрами:

  • selectedDates — массив выбранных дат в формате JavaScript Date
  • dateStr — строковое представление выбранных дат, сформированное согласно dateFormat
  • instance — экземпляр Flatpickr, предоставляющий доступ к API и внутреннему состоянию

Базовая форма:

onClose: function(selectedDates, dateStr, instance) {
    // логика обработки закрытия
}

Дополнительно, через instance доступны:

  • instance.config — текущая конфигурация
  • instance.input — связанный input-элемент
  • instance.open() / instance.close() — управление состоянием календаря
  • instance.selectedDates — актуальный массив выбранных значений

Момент срабатывания

onClose вызывается строго после того, как календарь завершил процесс закрытия. Это означает, что:

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

Событие не срабатывает при каждом изменении выбора — для этого используется onChange.

Различие между onClose и onChange

Ключевое различие заключается в семантике:

  • onChange — фиксирует каждое изменение выбора даты
  • onClose — фиксирует завершение сессии выбора

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

Пример различий:

flatpickr("#input", {
    mode: "single",
    onChange: function(selectedDates, dateStr) {
        console.log("Изменение:", dateStr);
    },
    onClose: function(selectedDates, dateStr) {
        console.log("Закрытие:", dateStr);
    }
});

При выборе нескольких дат в режиме multiple onChange будет вызываться многократно, тогда как onClose — один раз после завершения выбора.

Поведение в разных режимах

Режим single

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

flatpickr("#input", {
    onClose: function(selectedDates, dateStr, instance) {
        console.log(selectedDates[0]);
    }
});
Режим multiple

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

flatpickr("#input", {
    mode: "multiple",
    onClose: function(selectedDates, dateStr) {
        console.log("Выбранные даты:", selectedDates);
    }
});
Режим range

В режиме диапазона onClose срабатывает после завершения выбора начальной и конечной даты либо при закрытии без завершённого диапазона.

flatpickr("#input", {
    mode: "range",
    onClose: function(selectedDates, dateStr) {
        console.log("Диапазон:", dateStr);
    }
});

Причины срабатывания

Событие вызывается при следующих условиях:

  • выбор даты и автоматическое закрытие (single mode)
  • завершение выбора диапазона
  • ручное закрытие через UI
  • нажатие Esc
  • клик вне календаря
  • программный вызов instance.close()

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

Валидация после завершения выбора

Часто onClose используется для финальной проверки корректности выбранных дат:

flatpickr("#input", {
    onClose: function(selectedDates) {
        if (selectedDates.length && selectedDates[0] < new Date()) {
            console.warn("Выбрана прошедшая дата");
        }
    }
});
Отправка данных на сервер

Использование события позволяет отправлять запрос только после завершения выбора, снижая количество лишних запросов.

flatpickr("#input", {
    onClose: function(selectedDates, dateStr) {
        fetch("/api/save-date", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ date: dateStr })
        });
    }
});
Синхронизация с интерфейсом

onClose часто применяется для обновления UI после закрытия календаря:

flatpickr("#input", {
    onClose: function(selectedDates, dateStr, instance) {
        document.querySelector("#output").textContent = dateStr;
    }
});

Особенности поведения dateStr

Строка dateStr формируется на основе dateFormat и может отличаться от реального массива selectedDates.

Например:

flatpickr("#input", {
    dateFormat: "d-m-Y",
    onClose: function(selectedDates, dateStr) {
        console.log(dateStr); // "31-12-2026"
    }
});

При этом selectedDates всегда содержит полноценные объекты Date, независимо от формата отображения.

Контекст this и instance

Внутри onClose значение this обычно не используется как надёжный источник состояния. Рекомендуется опираться на instance.

onClose: function(selectedDates, dateStr, instance) {
    instance.input.classList.add("closed");
}

Через instance можно:

  • программно открыть/закрыть календарь
  • изменить конфигурацию (ограниченно)
  • получить доступ к DOM-элементам Flatpickr

Взаимодействие с программным закрытием

Если календарь закрывается через API:

instance.close();

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

Потенциальные нюансы

Повторное срабатывание

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

let locked = false;

onClose: function(selectedDates, dateStr) {
    if (locked) return;
    locked = true;

    setTimeout(() => locked = false, 300);
}
Отличие от blur-событий input

onClose не является DOM blur-событием, хотя часто триггерится при потере фокуса. Flatpickr управляет закрытием независимо от стандартного поведения input.

Поведение при пустом значении

Если дата не выбрана, selectedDates будет пустым массивом, а dateStr — пустой строкой:

onClose: function(selectedDates, dateStr) {
    // selectedDates = []
    // dateStr = ""
}

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

Типичная цепочка взаимодействия:

  • onOpen — открытие календаря
  • onChange — промежуточные изменения
  • onClose — финализация выбора

onClose часто выступает точкой фиксации состояния после всей цепочки событий.

Оглавление