Метод redraw

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

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

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

instance.redraw();

Метод не принимает аргументов и не возвращает значения.

Как работает redraw()

Flatpickr состоит из нескольких взаимосвязанных частей:

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

При вызове redraw() библиотека повторно строит необходимые элементы интерфейса на основе текущего внутреннего состояния объекта Flatpickr.

Пример:

const fp = flatpickr("#date", {});

fp.redraw();

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

Когда возникает необходимость в redraw()

После прямого изменения внутренних свойств

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

Например:

const fp = flatpickr("#date");

fp.currentYear = 2030;

fp.redraw();

Без вызова redraw() интерфейс может продолжать отображать старое значение года.

После изменения DOM-структуры вокруг календаря

Некоторые приложения динамически перемещают элементы интерфейса между контейнерами.

Например:

const calendar = document.querySelector(".flatpickr-calendar");

document.body.appendChild(calendar);

fp.redraw();

После перемещения может потребоваться обновление отображения.

После изменения пользовательских стилей

Если приложение динамически меняет CSS-классы или темы оформления, принудительная перерисовка помогает актуализировать внешний вид календаря.

document.body.classList.add("dark-theme");

fp.redraw();

Особенно полезно при использовании собственных тем и сложных CSS-анимаций.

После обновления конфигурации

Некоторые настройки изменяются через метод set().

fp.set("showMonths", 2);

В большинстве случаев Flatpickr автоматически обновляет интерфейс.

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

fp.config.showMonths = 3;

fp.redraw();

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

Отличие redraw() от destroy()

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

redraw()

Обновляет существующий интерфейс.

fp.redraw();

Экземпляр остается активным.

Сохраняются:

выбранные даты;
обработчики событий;
настройки;
ссылки на объект.

destroy()

Полностью удаляет Flatpickr.

fp.destroy();

После вызова:

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

Отличие redraw() от set()

Метод set() предназначен для изменения конфигурации.

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

Метод redraw() не изменяет параметры.

fp.redraw();

Он лишь обновляет визуальное представление на основе уже существующих данных.

Отличие redraw() от changeMonth()

Метод changeMonth() изменяет текущий месяц.

fp.changeMonth(1);

Метод redraw() не выполняет навигацию.

fp.redraw();

Он отображает текущее состояние календаря таким, каким оно уже хранится внутри экземпляра.

Использование при работе с плагинами

Некоторые плагины модифицируют содержимое календаря после его создания.

Пример условного расширения:

const fp = flatpickr("#date");

customPlugin(fp);

fp.redraw();

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

Перерисовка после асинхронной загрузки данных

Распространенный сценарий — получение данных с сервера.

fetch("/settings")
    .then(response => response.json())
    .then(data => {

        fp.config.minDate = data.minDate;
        fp.config.maxDate = data.maxDate;

        fp.redraw();
    });

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

Работа с несколькими календарями

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

const start = flatpickr("#start");
const end = flatpickr("#end");

start.redraw();
end.redraw();

Метод не оказывает влияния на другие экземпляры Flatpickr.

Использование внутри пользовательских функций

Нередко создаются вспомогательные функции для обновления календаря.

function refreshCalendar(fp) {
    fp.redraw();
}

Использование:

refreshCalendar(fp);

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

Пример обновления после изменения темы

const fp = flatpickr("#date");

document
    .querySelector("#theme")
    .addEventListener("click", () => {

        document.body.classList.toggle("dark");

        fp.redraw();
    });

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

Пример работы с динамическим количеством месяцев

const fp = flatpickr("#date", {
    showMonths: 1
});

document
    .querySelector("#expand")
    .addEventListener("click", () => {

        fp.config.showMonths = 3;

        fp.redraw();
    });

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

Вызов внутри обработчиков событий

Метод можно использовать внутри событий Flatpickr.

flatpickr("#date", {

    onOpen(selectedDates, dateStr, instance) {

        instance.redraw();

    }

});

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

Производительность и ограничения

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

Нежелательно вызывать метод в циклах:

for (let i = 0; i < 1000; i++) {
    fp.redraw();
}

Подобный код способен вызвать заметные задержки интерфейса.

Гораздо эффективнее выполнить все изменения заранее:

fp.config.showMonths = 2;
fp.config.weekNumbers = true;

fp.redraw();

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

Типичные ошибки

Ожидание изменения даты

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

Неверно:

fp.redraw();

Дата останется прежней.

Для изменения даты используется:

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

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

fp.destroy();

fp.redraw();

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

Использование вместо set()

Неправильно:

fp.config.minDate = "2026-01-01";

fp.redraw();

Хотя это может сработать, предпочтительнее использовать публичный API:

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

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

Практический сценарий

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

const fp = flatpickr("#date", {
    showMonths: 1
});

const button = document.querySelector("#toggle");

button.addEventListener("click", () => {

    if (fp.config.showMonths === 1) {
        fp.config.showMonths = 2;
    } else {
        fp.config.showMonths = 1;
    }

    fp.redraw();
});

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

Особенности метода

Ключевые характеристики redraw():

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

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