Программное изменение конфигурации

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

После инициализации календаря создаётся объект экземпляра, содержащий текущую конфигурацию в поле config. Этот объект отражает активное состояние всех опций, включая ограничения дат, режимы выбора и поведение интерфейса.

const fp = flatpickr("#input", {
  enableTime: true,
  minDate: "2026-01-01",
  maxDate: "2026-12-31"
});

Доступ к конфигурации осуществляется напрямую:

console.log(fp.config.minDate);
console.log(fp.config.enableTime);

Прямое изменение fp.config не приводит к обновлению интерфейса, поскольку библиотека не отслеживает мутации объекта. Для корректного изменения используются специальные методы.

Метод setDate и влияние на конфигурацию выбора

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

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

Метод setDate обновляет выбранное значение и синхронизирует состояние UI. Дополнительные параметры позволяют контролировать поведение событий:

fp.setDate("2026-06-15", true, "Y-m-d");

При необходимости множественного выбора массив дат передаётся напрямую:

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

Несмотря на то, что setDate влияет на состояние, он не изменяет ограничения или структуру конфигурации.

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

Основной механизм изменения параметров после инициализации реализуется через метод set.

fp.set("minDate", "2026-07-01");

Этот подход позволяет модифицировать отдельные параметры без пересоздания экземпляра.

Примеры изменения ключевых параметров

Изменение диапазона дат:

fp.set("minDate", "2026-01-10");
fp.set("maxDate", "2026-12-20");

Отключение и включение режима времени:

fp.set("enableTime", false);

Изменение режима выбора:

fp.set("mode", "multiple");

Каждое изменение приводит к внутреннему пересчёту состояния и обновлению UI.

Массовое обновление конфигурации через set

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

fp.set({
  minDate: "2026-02-01",
  maxDate: "2026-11-30",
  enableTime: true,
  time_24hr: true
});

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

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

Изменение ограничений дат в реальном времени

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

fp.set("minDate", new Date());
fp.set("maxDate", new Date(Date.now() + 7 * 24 * 60 * 60 * 1000));

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

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

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

fp.set("mode", "single");
fp.set("mode", "multiple");
fp.set("mode", "range");

При смене режима происходит полная переработка логики выделения дат:

  • single — одиночный выбор
  • multiple — множественные значения
  • range — диапазон дат

Важно учитывать, что переключение режима может требовать сброса текущего значения:

fp.clear();
fp.set("mode", "range");

Изменение формата и локализации

Форматирование даты может быть изменено динамически без пересоздания экземпляра.

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

При изменении формата отображение инпута и календаря синхронизируется автоматически.

Локализация также поддерживает динамическую замену:

fp.set("locale", "ru");

В случае сложных локалей возможна передача объекта:

fp.set("locale", {
  firstDayOfWeek: 1,
  weekdays: {
    shorthand: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
    longhand: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"]
  }
});

Переключение временных параметров

Конфигурация времени может быть изменена в рантайме:

fp.set("enableTime", true);
fp.set("noCalendar", false);

Изменение формата времени:

fp.set("time_24hr", false);

Изменения немедленно отражаются в UI-компонентах выбора времени.

Обновление после внешних изменений данных

В сценариях, где данные приходят асинхронно, конфигурация может изменяться в ответ на API-запросы.

fetch("/api/availability")
  .then(r => r.json())
  .then(data => {
    fp.set({
      minDate: data.min,
      maxDate: data.max
    });
  });

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

Работа с отключёнными датами

Изменение набора недоступных дат выполняется через параметр disable:

fp.set("disable", [
  "2026-06-10",
  "2026-06-11"
]);

Также поддерживаются функции для динамической логики:

fp.set("disable", [
  function(date) {
    return date.getDay() === 0; // отключение воскресений
  }
]);

При обновлении списка отключённых дат календарь пересчитывает доступные ячейки.

Переинициализация через destroy и повторную настройку

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

fp.destroy();

fp = flatpickr("#input", {
  mode: "range",
  enableTime: true
});

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

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

Плагины могут реагировать на изменение конфигурации по-разному. Некоторые из них требуют повторной инициализации при изменении ключевых параметров.

fp.set("plugins", [new CustomPlugin()]);

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

Ограничения динамического изменения

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

К таким параметрам относятся:

  • inline
  • wrap
  • базовые элементы привязки
  • некоторые плагины с жесткой инициализацией

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

Синхронизация состояния после множественных изменений

При последовательных вызовах set возможны промежуточные состояния, которые могут приводить к лишним перерисовкам. Для оптимизации используется пакетное обновление:

fp.set({
  minDate: "2026-03-01",
  maxDate: "2026-10-01",
  mode: "range",
  enableTime: true
});

Такой подход снижает количество внутренних пересчётов и обеспечивает согласованное состояние интерфейса после завершения обновления.

Программная очистка состояния при смене конфигурации

При смене логики выбора часто требуется сброс текущих данных:

fp.clear();
fp.set("mode", "multiple");

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

Управление конфигурацией через внешние источники состояния

В современных архитектурах конфигурация часто связана с состоянием приложения:

state.onChange(config => {
  fp.set(config);
});

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

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

Оглавление