Параметр disable и enable

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

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

Формат: массив дат

Наиболее простой вариант — передача массива конкретных дат.

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

Каждая строка интерпретируется как дата в формате, совместимом с настройкой dateFormat или ISO-строкой. Такие даты становятся недоступными для выбора.

Формат: объекты диапазонов

Для блокировки интервалов используется объектная форма с ключами from и to.

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

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

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

flatpickr("#date", {
  disable: [
    { from: "2026-01-01", to: "2026-01-07" },
    { from: "2026-02-10", to: "2026-02-20" }
  ]
});

Формат: функция

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

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

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

Комбинирование форматов

Все три подхода могут использоваться одновременно в одном массиве:

flatpickr("#date", {
  disable: [
    "2026-06-01",
    { from: "2026-06-10", to: "2026-06-15" },
    function(date) {
      return date.getMonth() === 11;
    }
  ]
});

Логика обработки выполняется последовательно: если хотя бы одно правило возвращает блокировку, дата считается недоступной.

Внутренняя логика применения disable

При рендеринге календаря каждая дата проходит проверку по всем правилам массива:

  1. Проверка строковых значений (точные совпадения дат)
  2. Проверка диапазонов from/to
  3. Выполнение функций-валидаторов

Если дата попадает хотя бы под одно правило, она помечается как disabled и становится некликабельной в UI.

Параметр enable

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

flatpickr("#date", {
  enable: [
    "2026-06-01",
    "2026-06-05",
    "2026-06-10"
  ]
});

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

Диапазоны в enable

Как и в disable, поддерживаются интервалы:

flatpickr("#date", {
  enable: [
    {
      from: "2026-06-01",
      to: "2026-06-10"
    }
  ]
});

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

Функциональная форма enable

Функция в enable работает как фильтр разрешённых дат. Возвращаемое значение определяет доступность:

  • true — дата разрешена
  • false — дата отключена
flatpickr("#date", {
  enable: [
    function(date) {
      return date.getMonth() === 5; // только июнь
    }
  ]
});

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

При одновременном использовании двух параметров действует приоритет whitelist-модели:

  • enable задаёт базовый набор разрешённых дат
  • disable дополнительно исключает часть из них
flatpickr("#date", {
  enable: [
    {
      from: "2026-06-01",
      to: "2026-06-30"
    }
  ],
  disable: [
    "2026-06-10",
    "2026-06-15"
  ]
});

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

При этом логика всегда интерпретируется как пересечение множеств: enable ∩ (всё − disable)

Поведение при отсутствии enable

Если enable не задан, календарь работает в режиме полного доступа, где:

  • все даты потенциально доступны
  • ограничения задаются только через disable

Это стандартный режим, используемый в большинстве сценариев.

Поведение при отсутствии disable

Если указан только enable, система полностью переходит в режим whitelist:

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

Особенности работы с функциями

Функции в enable и disable обрабатываются для каждой даты при построении календаря. Это означает, что:

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

Динамическое изменение через API

Параметры enable и disable могут изменяться после инициализации экземпляра.

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

fp.set("disable", [
  "2026-06-01",
  "2026-06-02"
]);

И аналогично:

fp.set("enable", [
  {
    from: "2026-07-01",
    to: "2026-07-15"
  }
]);

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

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

Блокировка выходных

disable: [
  date => date.getDay() === 0 || date.getDay() === 6
]

Ограничение периода бронирования

enable: [
  { from: "2026-06-01", to: "2026-06-30" }
]

Исключение праздничных дат

disable: [
  "2026-12-25",
  "2026-01-01"
]

Особенности визуального отображения

Отключённые даты:

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

Разрешённые даты при enable:

  • подчёркивают активную зону выбора
  • остальные даты выглядят полностью неактивными

Ошибки конфигурации и неоднозначности

При неправильной конфигурации возможны ситуации, когда:

  • enable задаёт пустой набор → календарь становится полностью заблокированным
  • пересечение enable и disable исключает все даты → выбор невозможен
  • функция возвращает нестабильные значения → поведение становится непредсказуемым

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

Итоговая модель поведения

Логика работы двух параметров формируется вокруг двух множеств:

  • disable — множество запрещённых значений
  • enable — множество разрешённых значений

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

Оглавление