Программное управление выбором

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

Ключевая особенность программного управления заключается в том, что внутреннее состояние календаря и значение input-поля могут контролироваться напрямую через методы экземпляра flatpickr, без необходимости эмуляции пользовательских действий.

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

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

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

Именно объект fp становится центральной точкой управления. Он содержит состояние выбранных дат, текущую навигацию, настройки и методы управления.

Установка значения: setDate

Метод setDate является основным инструментом программного выбора дат.

fp.setDate("2026-06-15");

При вызове происходит:

  • обновление внутреннего состояния выбранной даты;
  • синхронизация значения input;
  • обновление UI календаря.

Поддержка различных форматов

fp.setDate("2026-06-15");
fp.setDate(new Date());
fp.setDate(["2026-06-10", "2026-06-20"]);

Режим диапазона

В режиме range метод принимает два значения:

fp.setDate(["2026-06-01", "2026-06-10"]);

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

Управление поведением события

Метод поддерживает параметр triggerChange, позволяющий контролировать вызов событий:

fp.setDate("2026-06-15", true); // вызовет onChange
fp.setDate("2026-06-15", false); // без событий

Получение текущего значения: selectedDates

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

console.log(fp.selectedDates);

Оно всегда возвращает массив объектов Date, даже если выбран один элемент.

const first = fp.selectedDates[0];

Очистка выбора: clear

Метод clear сбрасывает текущее значение:

fp.clear();

Поведение:

  • очищает input;
  • сбрасывает внутренний массив selectedDates;
  • обновляет UI.

Можно управлять генерацией событий:

fp.clear(); // с событием onChange

Программное открытие и закрытие календаря

Открытие

fp.open();

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

Закрытие

fp.close();

Часто применяется в связке с внешними элементами интерфейса, например после выбора даты в кастомном списке.

Навигация по датам

Flatpickr предоставляет методы управления отображаемым месяцем.

Переключение на конкретную дату

fp.jumpToDate("2026-12-01");

Метод не изменяет выбранное значение, а только перемещает календарь.

Навигация по месяцам

fp.changeMonth(1);  // следующий месяц
fp.changeMonth(-1); // предыдущий месяц

Изменение года

fp.changeYear(2027);

При этом календарь автоматически перестраивает сетку дней.

Синхронизация с внешними данными

Программное управление часто используется для связи с API или состоянием приложения.

fetch("/api/date")
  .then(r => r.json())
  .then(data => {
    fp.setDate(data.date, false);
  });

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

Управление режимами выбора

В Flatpickr режимы single, multiple и range влияют на поведение программных методов.

Multiple режим

fp.setDate(["2026-06-01", "2026-06-05", "2026-06-10"]);

Каждая дата добавляется в набор выбранных значений.

Range режим

fp.setDate(["2026-06-01", "2026-06-10"]);

Если передан один элемент, он интерпретируется как старт диапазона.

Принудительное обновление интерфейса: redraw

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

fp.redraw();

Используется при:

  • изменении disable;
  • динамической смене minDate и maxDate;
  • обновлении локализации.

Управление доступными датами

Хотя это не прямой выбор, программное управление часто связано с ограничениями.

fp.set("minDate", "2026-06-01");
fp.set("maxDate", "2026-06-30");

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

Динамическое изменение конфигурации

Метод set позволяет менять любые опции:

fp.set("dateFormat", "d.m.Y");

После изменения часть параметров применяется немедленно, другие требуют обновления UI.

Работа с событиями при программном изменении

Flatpickr разделяет пользовательские и программные изменения.

fp.setDate("2026-06-15", false);

При false не вызываются:

  • onChange
  • onValueUpdate (в большинстве конфигураций)

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

Программное управление через input

Несмотря на наличие API, изменение input.value напрямую не является корректным способом управления:

input.value = "2026-06-15"; // не рекомендуется

Правильный подход:

fp.setDate("2026-06-15");

Иначе внутреннее состояние календаря и UI могут рассинхронизироваться.

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

При сложных сценариях используется последовательное управление:

fp.set("minDate", "2026-01-01");
fp.set("maxDate", "2026-12-31");
fp.setDate("2026-06-15", false);
fp.jumpToDate("2026-06-15");

Такой подход позволяет контролировать порядок обновлений и предотвращать промежуточные рендеры.

Взаимодействие с пользовательскими компонентами

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

Пример синхронизации с внешним селектором:

document.querySelector("#preset").addEventListener("change", (e) => {
  const value = e.target.value;
  fp.setDate(value);
});

Ограничения программного управления

При всей гибкости Flatpickr имеет ряд особенностей:

  • некоторые изменения требуют redraw;
  • UI обновляется асинхронно;
  • режимы multiple и range накладывают ограничения на формат входных данных;
  • прямое вмешательство в DOM приводит к рассинхронизации состояния.

Контроль жизненного цикла состояния

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

  1. изменение конфигурации;
  2. обновление диапазонов;
  3. установка даты;
  4. навигация по календарю;
  5. синхронизация событий.

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

Итоговая модель программного контроля

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

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