Включение только определенных дат

Механизм ограничения доступных дат в Flatpickr строится вокруг двух взаимодополняющих конфигурационных подходов — исключения (disable) и включения (enable). Приоритетная логика библиотеки такова, что если задан список разрешённых дат, календарь начинает работать по принципу «разрешено только то, что явно указано», игнорируя общий диапазон доступных значений, если он не пересекается с правилами включения.

Ключевая настройка для работы с ограниченным набором дат — параметр enable. Он принимает массив, который может содержать:

  • отдельные даты;
  • диапазоны дат;
  • функции-валидаторы;
  • строки в формате, поддерживаемом Flatpickr.

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

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

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

Форматы описания разрешённых дат

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

Строковое представление

Наиболее простой вариант — ISO-формат:

enable: ["2026-06-01", "2026-06-02"]

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

Объекты Date

Разрешённые даты можно задавать через экземпляры Date:

enable: [
  new Date(2026, 5, 1),
  new Date(2026, 5, 10)
]

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

Диапазоны дат

Flatpickr позволяет задавать интервалы:

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

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

Эквивалент с использованием объектов:

enable: [
  {
    from: new Date(2026, 5, 1),
    to: new Date(2026, 5, 10)
  }
]

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

Наиболее гибкий способ управления доступностью — использование функции. В этом режиме каждое значение проверяется динамически.

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

В данном случае разрешены все дни, кроме воскресенья. Функция принимает объект Date и должна возвращать true или false.

Функциональный подход используется для:

  • сложных бизнес-правил;
  • динамических ограничений;
  • вычисления доступности на основе внешних данных.

Комбинирование условий внутри функции

Функции могут включать произвольную логику:

enable: [
  function(date) {
    const day = date.getDay();
    const isWeekend = (day === 0 || day === 6);
    const isFirstHalfOfMonth = date.getDate() <= 15;

    return !isWeekend && isFirstHalfOfMonth;
  }
]

Здесь одновременно учитываются несколько условий, формируя сложное правило доступности.

Приоритетность enable и disable

При одновременном использовании enable и disable поведение Flatpickr меняется:

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

Пример комбинированной конфигурации:

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

В этом случае диапазон месяца доступен, но отдельные даты исключены.

Работа с серверными данными

Частый сценарий — получение списка доступных дат с backend. Такие данные обычно приходят в виде массива строк:

[
  "2026-06-01",
  "2026-06-02",
  "2026-06-05"
]

Передача в Flatpickr происходит напрямую:

fetch("/api/available-dates")
  .then(res => res.json())
  .then(dates => {
    flatpickr("#calendar", {
      enable: dates
    });
  });

Нормализация данных

При работе с API важно учитывать:

  • формат даты (ISO 8601 предпочтителен);
  • отсутствие времени или наличие UTC-суффикса;
  • возможные дубликаты;
  • сортировку.

Иногда требуется предварительная очистка:

const normalized = [...new Set(dates)]
  .map(d => d.split("T")[0]);

Диапазоны как результат бизнес-логики

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

const availability = [
  {
    from: "2026-06-01",
    to: "2026-06-07"
  },
  {
    from: "2026-06-15",
    to: "2026-06-20"
  }
];

flatpickr("#calendar", {
  enable: availability
});

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

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

Смещение из-за часовых поясов

При использовании строкового формата:

"2026-06-01"

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

  • сервер возвращает 2026-06-01T00:00:00Z;
  • браузер интерпретирует как предыдущий день при отрицательном смещении.

Решение — нормализация до даты без времени.

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

Если список разрешённых дат содержит тысячи значений, линейная проверка может снижать производительность. В таких случаях предпочтительнее:

  • использование диапазонов;
  • предварительная агрегация;
  • переход на функцию с hash-set проверкой.

Пример оптимизации:

const allowedSet = new Set(dates);

flatpickr("#calendar", {
  enable: [
    function(date) {
      return allowedSet.has(date.toISOString().split("T")[0]);
    }
  ]
});

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

Flatpickr позволяет изменять конфигурацию после инициализации через set():

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

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

При обновлении происходит перерасчёт внутренних структур и перерисовка календаря.

Использование enable для бизнес-ограничений

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

  • расписания работы (только рабочие дни);
  • доступность ресурсов (бронирование слотов);
  • выбор дат доставки (только логистически доступные дни);
  • временные акции (ограниченные периоды).

Пример логики доставки:

flatpickr("#delivery", {
  enable: [
    function(date) {
      const today = new Date();
      const diff = (date - today) / (1000 * 60 * 60 * 24);

      return diff >= 2 && diff <= 10;
    }
  ]
});

Здесь задаётся окно доступности от 2 до 10 дней вперёд.

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

Параметр enable может сочетаться с:

  • minDate и maxDate — задают внешние границы;
  • dateFormat — влияет только на отображение;
  • locale — влияет на визуализацию, но не на логику.

Если одновременно заданы minDate/maxDate и enable, логика становится пересечением условий всех ограничений.

Обобщённая модель поведения

Поведение Flatpickr при использовании enable можно описать как последовательность фильтрации:

  1. формируется полный диапазон дат;
  2. применяется ограничение minDate/maxDate;
  3. применяется фильтр enable (если задан);
  4. применяется фильтр disable;
  5. формируется итоговый набор доступных значений.

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

Оглавление