Событие onOpen

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

Поведение календаря Flatpickr строится вокруг нескольких ключевых событий:

  • инициализация экземпляра (onReady)
  • открытие календаря (onOpen)
  • изменение значения (onChange)
  • закрытие календаря (onClose)
  • обновление состояния (onValueUpdate и внутренние механизмы)

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

Сигнатура обработчика onOpen

Обработчик события получает стандартный набор аргументов Flatpickr:

onOpen: function(selectedDates, dateStr, instance) {
    // логика
}

Параметры:

selectedDates Массив объектов Date, содержащий текущие выбранные значения. В режиме без выбора массив пуст.

dateStr Строковое представление выбранной даты в формате, заданном в конфигурации dateFormat.

instance Ссылка на текущий экземпляр Flatpickr. Через него доступно полное API управления календарём.

Базовое использование onOpen

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

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

Взаимодействие с экземпляром через instance

Объект instance предоставляет доступ к внутреннему состоянию и методам управления:

  • instance.calendarContainer — DOM-узел календаря
  • instance.input — связанное поле ввода
  • instance.selectedDates — массив выбранных дат
  • instance.setDate() — программная установка даты
  • instance.close() — закрытие календаря

Пример модификации интерфейса при открытии:

flatpickr("#calendar", {
    onOpen: function(selectedDates, dateStr, instance) {
        instance.calendarContainer.classList.add("calendar-opened");
    }
});

Добавление класса позволяет изменять стили календаря только в активном состоянии.

Использование onOpen для динамической логики

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

Подгрузка данных при открытии

flatpickr("#calendar", {
    onOpen: function(selectedDates, dateStr, instance) {
        fetch("/api/unavailable-dates")
            .then(res => res.json())
            .then(data => {
                instance.set("disable", data);
            });
    }
});

В этом сценарии данные загружаются лениво, только в момент открытия календаря.

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

Обычный режим (single)

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

Режим multiple

При множественном выборе selectedDates содержит массив всех выбранных дат. В onOpen можно использовать его для визуальной синхронизации.

onOpen: function(selectedDates, dateStr, instance) {
    selectedDates.forEach(date => {
        console.log(date.toISOString());
    });
}

Режим range

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

Отличие onOpen от onReady

onReady вызывается один раз при инициализации экземпляра, тогда как onOpen может вызываться многократно при каждом открытии календаря.

Событие Когда вызывается Повторяемость
onReady после инициализации один раз
onOpen при каждом открытии календаря многократно

onOpen не гарантирует первичную готовность DOM, но гарантирует факт отображения интерфейса.

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

onOpen часто используется совместно с закрытием и изменением данных.

flatpickr("#calendar", {
    onOpen: function(_, __, instance) {
        console.log("open");
    },
    onClose: function(_, __, instance) {
        console.log("close");
    },
    onChange: function(selectedDates, dateStr, instance) {
        console.log("change", dateStr);
    }
});

Такой набор позволяет отслеживать полный цикл взаимодействия пользователя с календарём.

Особенности вызова в мобильной среде

На мобильных устройствах Flatpickr может переключаться на нативные элементы ввода в зависимости от конфигурации. В таком случае поведение onOpen зависит от параметра disableMobile.

  • при disableMobile: true календарь рендерится всегда, и onOpen вызывается стандартно
  • при disableMobile: false может использоваться нативный date picker, и вызов события становится зависимым от реализации браузера

Программное открытие и onOpen

Метод instance.open() инициирует открытие календаря и вызывает onOpen:

const fp = flatpickr("#calendar", {
    onOpen: function(_, __, instance) {
        console.log("opened programmatically or by user");
    }
});

fp.open();

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

Манипуляции с состоянием внутри onOpen

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

Пример блокировки дат при каждом открытии:

flatpickr("#calendar", {
    onOpen: function(_, __, instance) {
        instance.set("minDate", new Date());
    }
});

Работа с DOM в момент onOpen

К моменту вызова календарь уже присутствует в DOM, поэтому доступны прямые DOM-манипуляции:

onOpen: function(_, __, instance) {
    const calendar = instance.calendarContainer;
    const footer = document.createElement("div");
    footer.textContent = "Выбор даты активен";
    calendar.appendChild(footer);
}

Такие изменения сохраняются до закрытия календаря, если не пересоздаётся экземпляр.

Ограничения и особенности

  • повторное открытие вызывает повторный вызов onOpen
  • отсутствие выбранной даты не влияет на вызов события
  • событие не блокирует открытие календаря
  • асинхронные операции внутри события не задерживают отображение интерфейса

Типовые сценарии применения

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

Взаимодействие с кастомными конфигурациями

При использовании сложных конфигураций Flatpickr, включая plugins, rangePlugin, confirmDate и другие расширения, onOpen часто служит точкой инициализации дополнительных элементов интерфейса, связанных с календарём.

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

Оглавление