Метод set для изменения параметров

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

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

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

instance.set(option, value);

где:

  • option — название изменяемого параметра;
  • value — новое значение параметра.

Простейший пример:

const calendar = flatpickr("#date", {
    minDate: "2025-01-01"
});

calendar.set("minDate", "2025-06-01");

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

Почему используется set вместо прямого изменения config

Каждый экземпляр Flatpickr содержит объект конфигурации:

calendar.config

Технически параметры можно менять напрямую:

calendar.config.minDate = "2025-06-01";

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

Правильный вариант:

calendar.set("minDate", "2025-06-01");

Метод выполняет дополнительные действия:

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

Именно поэтому для изменения настроек всегда рекомендуется использовать set().

Изменение минимальной даты

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

Исходная конфигурация:

const calendar = flatpickr("#date", {
    minDate: "2025-01-01"
});

Позже ограничение может измениться:

calendar.set("minDate", "2025-07-01");

После выполнения:

  • все даты раньше 1 июля становятся недоступными;
  • пользователь не сможет выбрать запрещённый диапазон;
  • календарь автоматически обновится.

Изменение максимальной даты

Аналогичным образом работает параметр maxDate.

Первоначальная настройка:

const calendar = flatpickr("#date", {
    maxDate: "2025-12-31"
});

Изменение:

calendar.set("maxDate", "2025-09-30");

Теперь выбор будет ограничен сентябрём.

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

Одновременное изменение диапазона дат

Минимальная и максимальная даты могут изменяться совместно.

calendar.set("minDate", "2025-06-01");
calendar.set("maxDate", "2025-06-30");

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

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

  • выбора отпусков;
  • бронирования гостиниц;
  • оформления билетов;
  • регистрации на мероприятия.

Изменение формата отображения даты

Параметр dateFormat также можно изменять динамически.

Начальная конфигурация:

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

Изменение:

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

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

Например:

2025-08-15

превратится в:

15.08.2025

Переключение режима выбора времени

Flatpickr поддерживает работу не только с датами, но и со временем.

Создание календаря:

const calendar = flatpickr("#date");

Включение выбора времени:

calendar.set("enableTime", true);

Теперь появятся элементы управления временем.

Обратное действие:

calendar.set("enableTime", false);

Компонент снова станет обычным календарём.

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

Можно динамически менять отображение времени.

Например:

calendar.set("time_24hr", true);

После этого вместо формата:

2:30 PM

будет использоваться:

14:30

Обратное переключение:

calendar.set("time_24hr", false);

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

Параметр mode определяет способ выбора дат.

Доступны режимы:

  • single
  • multiple
  • range

Исходная настройка:

const calendar = flatpickr("#date", {
    mode: "single"
});

Переключение:

calendar.set("mode", "range");

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

Для множественного выбора:

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

Изменение количества отображаемых месяцев

Параметр showMonths отвечает за число одновременно отображаемых календарей.

Обычный вариант:

calendar.set("showMonths", 2);

Интерфейс станет таким:

Июнь 2025 | Июль 2025

Три месяца:

calendar.set("showMonths", 3);

Это удобно для выбора длинных диапазонов дат.

Динамическое изменение локализации

Flatpickr поддерживает большое количество языков.

Если локализация подключена заранее:

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

Позже можно переключиться:

calendar.set("locale", "en");

или

calendar.set("locale", "de");

Календарь обновит:

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

Изменение первого дня недели

В некоторых странах неделя начинается с воскресенья, в других — с понедельника.

Настройка через объект локализации:

calendar.set("locale", {
    firstDayOfWeek: 1
});

Понедельник станет первым днём недели.

Для воскресенья:

calendar.set("locale", {
    firstDayOfWeek: 0
});

Изменение разрешённых дат

Параметр enable определяет список доступных дат.

Пример:

calendar.set("enable", [
    "2025-07-01",
    "2025-07-02",
    "2025-07-03"
]);

После обновления остальные даты станут недоступными.

Это полезно для:

  • записи на приём;
  • бронирования ресурсов;
  • выбора рабочих дней.

Изменение запрещённых дат

Параметр disable работает противоположным образом.

calendar.set("disable", [
    "2025-12-31",
    "2026-01-01"
]);

Указанные даты окажутся недоступными.

Частые сценарии:

  • праздничные дни;
  • выходные;
  • технические перерывы;
  • забронированные интервалы.

Использование функций в enable и disable

Метод set() поддерживает передачу функций.

Пример запрета воскресений:

calendar.set("disable", [
    function(date) {
        return date.getDay() === 0;
    }
]);

Запрет распространяется автоматически на все воскресенья независимо от месяца и года.

Изменение позиции календаря

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

calendar.set("position", "above");

или

calendar.set("position", "below");

Также поддерживаются комбинированные варианты:

calendar.set("position", "auto center");

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

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

Включение режима:

calendar.set("altInput", true);

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

calendar.set("altFormat", "d.m.Y");

Пользователь увидит:

15.08.2025

а реальное значение поля останется:

2025-08-15

Массовое изменение нескольких параметров

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

calendar.set("enableTime", true);
calendar.set("time_24hr", true);
calendar.set("dateFormat", "Y-m-d H:i");

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

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

Изменение настроек после ответа сервера

Метод особенно полезен при работе с AJAX.

Пример:

fetch("/api/available-dates")
    .then(response => response.json())
    .then(data => {
        calendar.set("enable", data.availableDates);
    });

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

Переинициализация компонента при этом не требуется.

Использование внутри обработчиков событий

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

countrySelect.addEventListener("change", () => {

    if (countrySelect.value === "US") {
        calendar.set("dateFormat", "m/d/Y");
    } else {
        calendar.set("dateFormat", "d.m.Y");
    }

});

Интерфейс автоматически адаптируется под выбранную страну.

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

Часто один календарь влияет на другой.

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

startCalendar.config.onChange.push(function(selectedDates) {

    endCalendar.set("minDate", selectedDates[0]);

});

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

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

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

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

Однако при большом количестве операций подряд:

for (let i = 0; i < 1000; i++) {
    calendar.set("minDate", someDate);
}

будут выполняться многочисленные перерасчёты интерфейса.

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

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

Изменение config вместо set

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

calendar.config.maxDate = "2025-12-31";

Правильно:

calendar.set("maxDate", "2025-12-31");

Передача несуществующего параметра

calendar.set("unknownOption", 123);

Такой код не приведёт к ожидаемому результату.

Следует использовать только поддерживаемые параметры конфигурации Flatpickr.

Некорректный формат даты

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

calendar.set("minDate", "31-12-2025");

Правильно:

calendar.set("minDate", "2025-12-31");

или объект даты:

calendar.set("minDate", new Date());

Несовместимые настройки

Например:

calendar.set("enableTime", true);
calendar.set("noCalendar", true);

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

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

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

Оглавление