В Flatpickr система ограничений строится как набор реактивных параметров, которые могут изменяться во время жизни экземпляра календаря без его пересоздания. Это позволяет динамически управлять доступными датами в зависимости от внешнего состояния приложения, бизнес-логики, ответов сервера и взаимодействий между несколькими календарями.
Ключевая особенность Flatpickr — возможность обновления конфигурации после инициализации. Ограничения не фиксируются при создании экземпляра, а хранятся внутри объекта и могут быть изменены через API.
Наиболее часто изменяемые параметры:
Динамическое управление этими параметрами позволяет строить адаптивные интерфейсы календарей.
Основной механизм изменения конфигурации — метод
set().
fp.set('minDate', '2026-01-01');
fp.set('maxDate', '2026-12-31');После вызова происходит немедленное обновление состояния календаря без пересоздания DOM-инстанса. Это критически важно для производительности и сохранения текущего выбранного значения.
Изменение может быть как расширяющим, так и сужающим диапазон. В случае конфликта текущего выбранного значения с новыми ограничениями Flatpickr автоматически корректирует выбранную дату.
fp.set('minDate', new Date());Типичный сценарий — блокировка прошедших дат при оформлении заказа. При каждом открытии календаря значение может пересчитываться, например, на основе текущего времени или часового пояса пользователя.
fp.set('maxDate', '2026-06-30');Используется для ограничения горизонта планирования: бронирования, дедлайны, периоды отчетности.
Часто ограничения зависят от данных сервера. Например, API возвращает недоступные дни:
fetch('/api/unavailable-dates')
.then(res => res.json())
.then(data => {
fp.set('disable', data.dates);
});В этом случае календарь становится отражением актуального состояния системы, а не статичной структуры.
disable поддерживает не только массив дат, но и функции,
что делает его мощным инструментом динамической фильтрации.
fp.set('disable', [
'2026-05-10',
'2026-05-11',
'2026-05-12'
]);fp.set('disable', [
function(date) {
return date.getDay() === 0; // блокировка воскресений
}
]);Функциональный подход позволяет учитывать сложные условия: праздники, загрузку ресурсов, пользовательские роли.
В отличие от disable, параметр enable
задаёт разрешённые даты. При изменении логики приложения может
потребоваться полное переключение режима фильтрации.
fp.set('enable', [
'2026-06-01',
'2026-06-02',
'2026-06-03'
]);При наличии enable все остальные даты автоматически
становятся недоступными, что позволяет реализовать whitelist-логику.
При изменении ограничений Flatpickr выполняет внутреннюю синхронизацию:
Это происходит автоматически и не требует ручного обновления UI.
Частый кейс — два связанных поля: дата начала и дата окончания.
startPicker.set('maxDate', endPicker.selectedDates[0]);
endPicker.set('minDate', startPicker.selectedDates[0]);Такой подход предотвращает выбор некорректных диапазонов.
Дополнительно используется обработчик изменения:
startPicker.config.onChange.push((selectedDates) => {
endPicker.set('minDate', selectedDates[0]);
});Здесь ограничения одного календаря становятся функцией состояния другого.
Событие onChange часто используется для каскадного
обновления логики.
fp.config.onChange.push((selectedDates) => {
const selected = selectedDates[0];
if (selected) {
const nextWeek = new Date(selected);
nextWeek.setDate(selected.getDate() + 7);
fp.set('maxDate', nextWeek);
}
});Таким образом ограничения становятся зависимыми от пользовательского выбора.
В интерфейсах с фильтрами календарь часто управляется кнопками или селекторами:
document.querySelector('#reset').addEventListener('click', () => {
fp.set('minDate', null);
fp.set('maxDate', null);
fp.set('disable', []);
});Сброс ограничений возвращает календарь в исходное состояние, что полезно для сценариев поиска или фильтрации.
Flatpickr допускает одновременное использование нескольких типов ограничений:
При динамическом изменении важно учитывать приоритеты: если дата
попадает в disable, она останется недоступной даже при
наличии в enable.
Одно из ключевых преимуществ — отсутствие необходимости уничтожать календарь:
fp.destroy();
fp = flatpickr(input, config);Вместо этого используется:
fp.set('minDate', '2026-01-01');Такой подход снижает нагрузку на DOM и сохраняет состояние UI.
При включённом времени (enableTime) динамические
ограничения распространяются и на часы/минуты:
fp.set('minTime', '09:00');
fp.set('maxTime', '18:00');Это позволяет строить системы бронирования с учётом рабочего графика.
В реальных приложениях ограничения часто зависят от:
Пример динамической генерации:
function updateRestrictions(userType) {
if (userType === 'premium') {
fp.set('maxDate', '2027-01-01');
} else {
fp.set('maxDate', '2026-06-01');
}
}Таким образом календарь становится частью бизнес-логики, а не просто UI-компонентом.
Если новое ограничение делает текущую дату недопустимой:
Это обеспечивает устойчивость интерфейса при резких изменениях правил.
При интенсивных обновлениях ограничений (например, при фильтрации) важно учитывать:
set()Flatpickr оптимизирован для частичных обновлений, но чрезмерные вызовы могут приводить к лишним перерисовкам календарной сетки.
Поведение системы можно представить как поток:
set() или обновление configЭта модель делает календарь адаптивным компонентом, способным реагировать на изменения данных в реальном времени без потери состояния и без пересоздания экземпляра.