Метод setDate

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

fp.setDate(date, triggerChange, format);

Параметры:

  • date — значение даты или массива дат
  • triggerChange — булево значение, определяющее необходимость вызова событий onChange
  • format — строка формата, используемая при передаче даты в виде строки

Назначение и базовое поведение

Метод setDate обновляет внутреннее состояние Flatpickr и синхронизирует его с UI-компонентом и input-полем. Он влияет сразу на несколько уровней:

  • внутренний массив выбранных дат (selectedDates)
  • отображение в календаре
  • значение input-поля (input.value)
  • поведение событий (onChange, onValueUpdate)

При вызове метода календарь автоматически пересчитывает активное состояние дней, диапазонов и выделений, если включены соответствующие режимы (range, multiple, time).

Установка одиночной даты

Базовый сценарий — установка одной даты:

fp.setDate(new Date(2026, 0, 15));

или строкой:

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

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

Обновление без триггера событий

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

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

В этом случае:

  • selectedDates обновляется
  • UI синхронизируется
  • onChange не вызывается

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

Принудительный вызов событий

Если требуется имитация пользовательского ввода:

fp.setDate("2026-01-15", true);

Это приводит к последовательному запуску:

  • onValueUpdate
  • onChange

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

Работа с форматами строк

Третий параметр используется, когда входная строка не соответствует текущему формату Flatpickr:

fp.setDate("15/01/2026", false, "d/m/Y");

В этом случае Flatpickr:

  1. Парсит строку по указанному формату
  2. Преобразует в объект Date
  3. Обновляет внутреннее состояние

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

Установка нескольких дат (multiple mode)

При включённой опции mode: "multiple" метод принимает массив:

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

Поведение:

  • полностью заменяется массив selectedDates
  • календарь перерисовывает все активные дни
  • input получает сериализованное значение через разделитель , (по умолчанию)

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

Режим диапазона (range mode)

В режиме диапазона:

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

или:

fp.setDate("2026-01-01 to 2026-01-15");

Flatpickr:

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

Если передана только одна дата:

fp.setDate("2026-01-01");

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

Поведение при повторной установке

Повторный вызов setDate полностью перезаписывает текущее состояние:

fp.setDate("2026-01-10");
fp.setDate("2026-01-20");

В результате останется только последняя дата.

Важно, что метод не добавляет значения к уже существующим (в отличие от ручного выбора в multiple режиме через UI).

Влияние на внутренние свойства

После вызова изменяются следующие структуры Flatpickr:

  • selectedDates — массив объектов Date
  • latestSelectedDateObj — последняя выбранная дата
  • input.value — строковое представление
  • prevCalendarDates — вспомогательные кэши календаря

Также может происходить перерасчёт min/max ограничений отображения.

Работа с временными значениями

Если включён режим времени (enableTime: true), setDate также задаёт время:

fp.setDate("2026-01-15 14:30");

При этом:

  • дата и время парсятся совместно
  • значения часов и минут применяются к объекту Date
  • если время не указано, используются значения по умолчанию (defaultHour, defaultMinute)

Граничные случаи

Некорректная дата

fp.setDate("invalid-date");

Результат:

  • дата игнорируется
  • состояние не обновляется
  • возможен вызов fallback поведения (зависит от конфигурации парсера)

Даты вне допустимого диапазона

При наличии ограничений:

minDate: "2026-01-10",
maxDate: "2026-01-20"

и вызове:

fp.setDate("2026-01-25");

поведение зависит от версии и настроек:

  • дата может быть проигнорирована
  • либо автоматически скорректирована (clamp behavior отсутствует по умолчанию)

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

Если дата отключена через disable, setDate может:

  • игнорировать установку
  • или установить значение в состояние, но не отобразить его как активное

Пример:

disable: ["2026-01-15"]
fp.setDate("2026-01-15");

Результат зависит от строгих правил валидации, заданных конфигурацией.

Синхронизация с UI

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

  • обновление выделения в календаре
  • пересчёт текущего месяца/недели отображения
  • обновление input-поля

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

Отличие от selectedDates

setDate — активный метод изменения состояния, тогда как selectedDates — только отражение текущего состояния.

Прямое изменение:

fp.selectedDates = [new Date()];

не рекомендуется, поскольку:

  • UI не обновляется
  • события не вызываются
  • внутренние кэши остаются несогласованными

Корректный способ:

fp.setDate(new Date());

Использование в динамических сценариях

Метод часто применяется в следующих ситуациях:

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

Пример:

function applyPresetLastWeek(fp) {
  const end = new Date();
  const start = new Date();
  start.setDate(end.getDate() - 7);

  fp.setDate([start, end], true);
}

Особенности при повторной инициализации

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

  • setDate не сохраняет состояние между инстансами
  • значения должны устанавливаться заново после flatpickr() конструктора

Производительность

Метод может вызывать:

  • перерасчёт DOM календаря
  • повторное применение CSS классов
  • обновление input value

При частых вызовах (например, в цикле или при вводе данных) рекомендуется:

  • избегать лишних вызовов triggerChange = true
  • группировать обновления состояния
  • использовать debounce при внешней синхронизации
Оглавление