Отключение конкретных дат

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

Параметр disable передаётся в конфигурации Flatpickr как массив. Каждый элемент массива может иметь один из трёх типов:

  • строка с датой
  • объект диапазона { from, to }
  • функция, возвращающая true для отключения даты

Простейшая форма выглядит так:

flatpickr("#calendar", {
  disable: [
    "2026-06-10",
    "2026-06-15",
    "2026-06-20"
  ]
});

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

Отключение массива отдельных дат

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

const disabledDates = [
  "2026-06-01",
  "2026-06-03",
  "2026-06-07",
  "2026-06-12"
];

flatpickr("#calendar", {
  disable: disabledDates
});

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

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

Отключение диапазонов дат

Flatpickr поддерживает отключение целых промежутков времени через объектную запись:

flatpickr("#calendar", {
  disable: [
    {
      from: "2026-06-10",
      to: "2026-06-20"
    }
  ]
});

Такой формат блокирует все даты включительно от начальной до конечной границы диапазона. Это особенно полезно при:

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

Можно комбинировать несколько диапазонов:

flatpickr("#calendar", {
  disable: [
    { from: "2026-06-01", to: "2026-06-05" },
    { from: "2026-06-15", to: "2026-06-18" }
  ]
});

Использование функции для динамического отключения

Наиболее гибкий вариант — функция, принимающая дату и возвращающая true (отключить) или false (оставить доступной).

flatpickr("#calendar", {
  disable: [
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ]
});

В данном примере отключаются выходные дни (суббота и воскресенье). Функция получает объект Date, что позволяет использовать любую JavaScript-логику.

Пример с праздничными датами

const holidays = [
  "2026-01-01",
  "2026-05-09",
  "2026-12-31"
];

flatpickr("#calendar", {
  disable: [
    function(date) {
      const formatted = date.toISOString().slice(0, 10);
      return holidays.includes(formatted);
    }
  ]
});

Функциональный подход позволяет интегрировать внешние источники данных, включая API календарей праздников или корпоративные графики.

Комбинирование разных типов отключения

Flatpickr допускает смешивание строк, диапазонов и функций в одном массиве:

flatpickr("#calendar", {
  disable: [
    "2026-06-10",
    { from: "2026-06-15", to: "2026-06-18" },
    function(date) {
      return date.getDay() === 0;
    }
  ]
});

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

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

Параметры disable и enable могут использоваться совместно, но их логика различается:

  • disable — блокирует указанные даты
  • enable — разрешает только указанные даты

Если оба параметра заданы одновременно, приоритет обычно отдаётся логике enable, поскольку она задаёт whitelist-модель.

Пример whitelist-подхода:

flatpickr("#calendar", {
  enable: [
    "2026-06-01",
    "2026-06-02",
    "2026-06-03"
  ],
  disable: [
    "2026-06-02"
  ]
});

В результате доступной останется только одна дата — пересечение правил.

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

Flatpickr воспринимает строки дат в соответствии с dateFormat. Однако в большинстве случаев рекомендуется использовать ISO-формат YYYY-MM-DD, чтобы избежать неоднозначности.

flatpickr("#calendar", {
  dateFormat: "Y-m-d",
  disable: ["2026-06-10"]
});

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

Отключение дат с учётом временной зоны

Хотя Flatpickr работает с датами без явной привязки ко времени, при использовании функций необходимо учитывать локальную временную зону браузера. Например:

flatpickr("#calendar", {
  disable: [
    function(date) {
      const today = new Date();
      return date < today.setHours(0, 0, 0, 0);
    }
  ]
});

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

Динамическое обновление отключённых дат

Список disable можно изменять после инициализации через метод set():

const fp = flatpickr("#calendar", {
  disable: ["2026-06-10"]
});

fp.set("disable", [
  "2026-06-10",
  "2026-06-11",
  "2026-06-12"
]);

Это позволяет обновлять календарь без пересоздания экземпляра, что критично в SPA-приложениях.

Отключение повторяющихся паттернов

Иногда требуется блокировать повторяющиеся закономерности, например каждый понедельник:

flatpickr("#calendar", {
  disable: [
    function(date) {
      return date.getDay() === 1;
    }
  ]
});

Или каждые выходные:

flatpickr("#calendar", {
  disable: [
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ]
});

Производительность при большом количестве правил

При работе с большим массивом отключённых дат (тысячи значений) линейный поиск через includes может стать узким местом. В таких случаях используется Set:

const disabledSet = new Set([
  "2026-06-01",
  "2026-06-02",
  "2026-06-03"
]);

flatpickr("#calendar", {
  disable: [
    function(date) {
      const d = date.toISOString().slice(0, 10);
      return disabledSet.has(d);
    }
  ]
});

Это снижает сложность проверки до O(1) и улучшает производительность при рендеринге календаря.

Особенности обработки и ограничения логики

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

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

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

Оглавление