Фильтрация по датам

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

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

  • minDate — минимально допустимая дата
  • maxDate — максимально допустимая дата
  • disable — список запрещённых дат и правил
  • enable — список разрешённых дат и правил

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

flatpickr("#input", {
  minDate: "2026-01-01",
  maxDate: "2026-12-31"
});

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

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

Параметр disable позволяет явно исключать отдельные дни или диапазоны. Он поддерживает разные форматы: строки, массивы и функции.

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

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

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

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

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

Наиболее гибкий вариант — передача функции:

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

В данном случае исключаются выходные дни, вычисляемые динамически на основе объекта Date.

Инвертированная модель фильтрации через enable

Если требуется определить не исключённые, а строго разрешённые даты, используется enable. Этот режим инвертирует логику:

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

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

Функциональный вариант:

flatpickr("#input", {
  enable: [
    function(date) {
      return date.getDate() % 2 === 0;
    }
  ]
});

Здесь доступны только чётные числа месяца.

Комбинирование enable и disable

При одновременном использовании приоритет обычно отдаётся disable. Это позволяет задать базовый разрешённый набор и дополнительно исключить проблемные даты.

flatpickr("#input", {
  enable: [
    {
      from: "2026-01-01",
      to: "2026-12-31"
    }
  ],
  disable: [
    "2026-05-01"
  ]
});

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

Динамическая фильтрация через setOptions

Фильтрация может изменяться после инициализации. Для этого используется метод setOptions:

const fp = flatpickr("#input", {
  minDate: "today"
});

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

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

Фильтрация по логике бизнес-правил

Функциональные фильтры позволяют реализовывать сложные сценарии:

Ограничение по дням недели и числам месяца

flatpickr("#input", {
  disable: [
    function(date) {
      const day = date.getDay();
      const dateNum = date.getDate();

      const isWeekend = day === 0 || day === 6;
      const isFirstTenDays = dateNum <= 10;

      return isWeekend || isFirstTenDays;
    }
  ]
});

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

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

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

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

Контроль доступности через внешние данные

Фильтрация может зависеть от данных, получаемых из API:

fetch("/api/unavailable-dates")
  .then(res => res.json())
  .then(disabledDates => {
    flatpickr("#input", {
      disable: disabledDates
    });
  });

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

Построение условных правил с кэшированием

При больших наборах дат использование функций без оптимизации может приводить к снижению производительности. Эффективный подход — предварительная подготовка множества:

const disabledSet = new Set([
  "2026-01-10",
  "2026-01-11",
  "2026-01-12"
]);

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

Проверка через Set обеспечивает константную сложность доступа.

Ограничение выбора диапазонов с пользовательской логикой

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

flatpickr("#input", {
  mode: "range",
  disable: [
    function(date) {
      const day = date.getDay();
      return day === 0;
    }
  ]
});

В этом случае система предотвращает выбор диапазона, содержащего запрещённые дни.

Управление отображением дат через onDayCreate

Для визуальной фильтрации без полного блокирования используется onDayCreate:

flatpickr("#input", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    const date = dayElem.dateObj;

    if (date.getDay() === 0) {
      dayElem.classList.add("disabled-visual");
    }
  }
});

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

Приоритеты и конфликтующие правила

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

  1. minDate / maxDate
  2. enable
  3. disable
  4. пользовательские функции
  5. визуальные модификации

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

Масштабируемая фильтрация в больших календарях

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

function createDateKey(date) {
  return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
}

const disabledMap = {
  "2026-07-01": true,
  "2026-07-02": true
};

flatpickr("#input", {
  disable: [
    function(date) {
      return disabledMap[createDateKey(date)];
    }
  ]
});

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

Динамическое пересчитывание доступных дат

При изменении бизнес-условий требуется обновление фильтров без перезапуска компонента:

function updateAvailability(fp, newDisabled) {
  fp.set("disable", newDisabled);
  fp.redraw();
}

Метод redraw обновляет отображение календаря, синхронизируя визуальное состояние с новой логикой.

Связь фильтрации с пользовательским вводом

Фильтрация может зависеть от текста в инпуте или других элементов интерфейса:

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

document.querySelector("#type").addEventListener("change", (e) => {
  const type = e.target.value;

  fp.set("disable", [
    function(date) {
      return type === "weekdays" && (date.getDay() === 0 || date.getDay() === 6);
    }
  ]);
});

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

Объединение фильтрации и валидации

Фильтрация на уровне календаря не заменяет серверную валидацию. Часто используется дублирование логики:

  • Flatpickr блокирует недопустимые даты
  • сервер повторно проверяет значение при отправке
function validate(date) {
  const d = new Date(date);
  return d.getDay() !== 0;
}

Совпадение логики обеспечивает устойчивость к обходу клиентских ограничений.

Оглавление