Метод changeMonth

Метод changeMonth в экземпляре Flatpickr используется для программного переключения отображаемого месяца календаря без изменения выбранной даты (если явно не происходит выбор). Он относится к управляющим методам навигации внутри календарного UI и воздействует исключительно на состояние отображения.

fp.changeMonth(month, is_offset);

Параметры

month Тип: number Определяет целевой месяц или смещение относительно текущего месяца, в зависимости от режима использования.

  • Если is_offset = false — задаётся абсолютный индекс месяца (0–11)
  • Если is_offset = true — задаётся относительное смещение (например, 1 — следующий месяц, -1 — предыдущий)

is_offset Тип: boolean По умолчанию: false

Определяет режим интерпретации первого аргумента:

  • false — переход к конкретному месяцу года
  • true — смещение относительно текущего отображаемого месяца

Поведение метода

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

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

  1. Обновление модели текущего месяца
  2. При необходимости корректировка года (при переходе через декабрь/январь)
  3. Пересчёт отображаемой сетки дней
  4. Перерендер DOM календаря
  5. Применение ограничений minDate и maxDate

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

Работа с абсолютным режимом

При is_offset = false передаётся конкретный номер месяца:

fp.changeMonth(0); // январь
fp.changeMonth(6); // июль
fp.changeMonth(11); // декабрь

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

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

Работа с относительным режимом

При is_offset = true параметр month трактуется как шаг:

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

Особенности:

  • При переходе с декабря (11) на следующий месяц автоматически увеличивается год
  • При переходе с января на предыдущий месяц год уменьшается
  • Пересчёт происходит циклически с учётом календарной логики

Влияние на состояние календаря

Метод влияет исключительно на визуальное и навигационное состояние:

  • currentMonth обновляется
  • currentYear может изменяться
  • selectedDates не изменяются напрямую
  • input.value остаётся без изменений, если не происходит дополнительного действия выбора

Ограничения minDate и maxDate

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

  • Переход в месяц, где нет доступных дней, может быть скорректирован Flatpickr автоматически
  • При попытке перейти за пределы диапазона календарь “прилипает” к ближайшему допустимому месяцу
  • В некоторых конфигурациях навигация блокируется визуально, но метод всё равно может быть вызван программно

События, связанные с изменением месяца

При вызове changeMonth могут срабатывать следующие события:

  • onMonthChange — при изменении месяца
  • onYearChange — при переходе через границу года
  • onValueUpdate — если изменение влияет на выбранную дату (косвенно)

События срабатывают после завершения перерасчёта состояния календаря.

Примеры использования

Переключение на конкретный месяц

const fp = flatpickr("#input");

fp.changeMonth(3); // переход на апрель

Навигация вперёд и назад

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

Синхронизация с внешним интерфейсом

document.querySelector("#next").addEventListener("click", () => {
  fp.changeMonth(1, true);
});

document.querySelector("#prev").addEventListener("click", () => {
  fp.changeMonth(-1, true);
});

Внутренние механизмы перерасчёта

При вызове метода происходит пересборка календарной сетки:

  • вычисление первого дня месяца
  • определение смещения начала недели
  • генерация массива дней с учётом предыдущего и следующего месяца
  • применение локали (locale.firstDayOfWeek)
  • повторная отрисовка DOM-структуры

Процесс оптимизирован для минимального количества перерисовок, однако при частых вызовах возможны заметные DOM-операции.

Отличие от других методов навигации

nextMonth / prevMonth

  • специализированные методы
  • эквивалентны changeMonth(±1, true)
  • не позволяют задать произвольный месяц

changeMonth

  • универсальный метод
  • поддерживает абсолютный и относительный режим
  • предоставляет полный контроль над навигацией

Особенности работы с годами

При переходе через границы года:

  • декабрь → январь увеличивает currentYear
  • январь → декабрь уменьшает currentYear
  • переход учитывает только отображаемую часть календаря, не затрагивая выбранные даты

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

  • кастомная навигация календаря
  • синхронизация с внешними табами месяцев
  • создание собственного UI переключения периодов
  • реализация календарей с ограниченной навигацией
  • программное восстановление состояния при переключении вкладок

Нюансы поведения

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

Связанные внутренние поля состояния

При работе метода затрагиваются:

  • currentMonth
  • currentYear
  • daysContainer
  • monthElements
  • yearElements

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

Оглавление