Функция disable с условиями

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

Параметр disable передаётся в объект инициализации Flatpickr и представляет собой массив значений различных типов:

• отдельные даты
• диапазоны дат
• функции с условиями

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

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

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

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

Помимо одиночных значений поддерживаются диапазоны. Диапазон задаётся объектом с ключами from и to.

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

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

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

flatpickr("#dateInput", {
  disable: [
    "2026-03-05",
    {
      from: "2026-03-10",
      to: "2026-03-20"
    }
  ]
});

Функция как условие отключения

Наиболее гибкий способ управления доступностью дат реализуется через функцию. Flatpickr передаёт в неё объект Date, и на основании логики возвращается true или false.

• true — дата будет отключена
• false — дата останется доступной

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

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

Логические условия внутри функции

Функция может учитывать любые свойства объекта Date, включая день недели, месяц, год и даже более сложные вычисления.

Отключение выходных дней

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

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

Отключение дат до текущего дня

flatpickr("#dateInput", {
  disable: [
    function(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      return date < today;
    }
  ]
});

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

Комбинирование нескольких условий

Flatpickr допускает использование нескольких функций в массиве disable. Каждая функция применяется последовательно, и если хотя бы одна возвращает true, дата блокируется.

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

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

Приоритет и порядок обработки условий

Каждый элемент массива disable рассматривается независимо. Логика эквивалентна операции логического «ИЛИ» между условиями отключения.

Это означает:

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

flatpickr("#dateInput", {
  disable: [
    "2026-04-01",
    {
      from: "2026-04-10",
      to: "2026-04-15"
    },
    function(date) {
      return date.getDay() === 5;
    }
  ]
});

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

Использование внешних данных в условиях

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

const blockedDays = [1, 3, 5];

flatpickr("#dateInput", {
  disable: [
    function(date) {
      return blockedDays.includes(date.getDay());
    }
  ]
});

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

Учет временных зон и нормализация дат

При работе с disable важно учитывать, что объект Date в JavaScript зависит от локальной временной зоны. Это может влиять на сравнения дат при серверной синхронизации.

Рекомендуется нормализовать значения до полуночи:

function normalize(date) {
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  return d;
}

flatpickr("#dateInput", {
  disable: [
    function(date) {
      const normalized = normalize(date);
      const today = normalize(new Date());

      return normalized < today;
    }
  ]
});

Динамическое обновление disable через set()

Flatpickr позволяет изменять настройки после инициализации через метод set.

const picker = flatpickr("#dateInput", {
  disable: []
});

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

Это полезно при изменении бизнес-логики без пересоздания экземпляра календаря.

Взаимодействие с другими параметрами

Параметр disable работает в связке с другими настройками:

• minDate и maxDate задают общий диапазон
• enable может переопределять доступность дат
• locale влияет только на отображение, но не на логику

При конфликте условий enable и disable приоритет зависит от конкретной конфигурации, однако чаще используется логика исключений через disable.

Использование сложных бизнес-условий

Функции могут включать проверку дат относительно календарных правил:

flatpickr("#dateInput", {
  disable: [
    function(date) {
      const year = date.getFullYear();

      const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

      if (!isLeapYear && date.getMonth() === 1 && date.getDate() === 29) {
        return true;
      }

      return false;
    }
  ]
});

В этом примере блокируется 29 февраля в невисокосные годы.

Сочетание с валидацией пользовательского ввода

Хотя disable управляет UI-выбором, он не заменяет серверную валидацию. Однако его можно синхронизировать с логикой проверки:

function isBlocked(date) {
  return date.getDay() === 0;
}

flatpickr("#dateInput", {
  disable: [
    function(date) {
      return isBlocked(date);
    }
  ]
});

Такая структура позволяет переиспользовать бизнес-логику как на клиенте, так и на сервере.

Обработка часового диапазона внутри суток

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

flatpickr("#dateInput", {
  disable: [
    function(date) {
      const hourRestrictionStart = 9;
      const hourRestrictionEnd = 18;

      const now = new Date();

      if (date.toDateString() === now.toDateString()) {
        return now.getHours() < hourRestrictionStart || now.getHours() > hourRestrictionEnd;
      }

      return false;
    }
  ]
});

Масштабирование логики отключения

При увеличении количества условий целесообразно выносить правила в отдельные функции:

function isWeekend(date) {
  const day = date.getDay();
  return day === 0 || day === 6;
}

function isHoliday(date, holidays) {
  return holidays.some(h => h.toDateString() === date.toDateString());
}

flatpickr("#dateInput", {
  disable: [
    function(date) {
      return isWeekend(date) || isHoliday(date, [
        new Date("2026-05-01"),
        new Date("2026-05-09")
      ]);
    }
  ]
});

Такой подход повышает читаемость и упрощает сопровождение логики.

Особенности поведения при рендеринге

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

Ограничения механизма disable

Несмотря на гибкость, механизм имеет ряд ограничений:

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

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

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

На практике disable используется для:

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

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