Бронирование и резервирование

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

Базовая конфигурация диапазонного выбора

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

flatpickr("#booking", {
  mode: "range",
  dateFormat: "Y-m-d"
});

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

Ограничение допустимых дат

В системах резервирования критически важна блокировка недоступных периодов. Flatpickr предоставляет параметры minDate и maxDate, задающие границы доступного календаря.

flatpickr("#booking", {
  mode: "range",
  minDate: "today",
  maxDate: "2026-12-31"
});

Использование относительного значения "today" формирует динамическое ограничение, исключающее выбор прошедших дат. В сценариях бронирования ресурсов это предотвращает создание невалидных заявок задним числом.

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

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

const bookedDates = [
  "2026-06-10",
  "2026-06-11",
  "2026-06-15"
];

flatpickr("#booking", {
  mode: "range",
  disable: bookedDates
});

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

Динамическая блокировка через функцию

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

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

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

Загрузка занятых периодов с сервера

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

fetch("/api/bookings")
  .then(res => res.json())
  .then(data => {
    const disabled = data.flatMap(booking => {
      return expandRange(booking.start, booking.end);
    });

    flatpickr("#booking", {
      mode: "range",
      disable: disabled
    });
  });

Функция expandRange в подобных архитектурах преобразует диапазоны в дискретные даты, поскольку Flatpickr работает на уровне отдельных значений календаря.

Обработка диапазонных пересечений

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

function expandRange(start, end) {
  const result = [];
  let current = new Date(start);

  while (current <= new Date(end)) {
    result.push(new Date(current).toISOString().slice(0, 10));
    current.setDate(current.getDate() + 1);
  }

  return result;
}

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

Валидация выбора диапазона

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

flatpickr("#booking", {
  mode: "range",
  onChange: function(selectedDates) {
    const [start, end] = selectedDates;

    if (start && end) {
      validateRange(start, end);
    }
  }
});

Функция валидации может учитывать:

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

Ограничение длительности бронирования

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

const MAX_DAYS = 7;

flatpickr("#booking", {
  mode: "range",
  onChange: function(dates) {
    if (dates.length === 2) {
      const diff = (dates[1] - dates[0]) / 86400000;

      if (diff > MAX_DAYS) {
        this.clear();
      }
    }
  }
});

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

Отображение доступности в ячейках календаря

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

flatpickr("#booking", {
  mode: "range",
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    const date = dayElem.dateObj.toISOString().slice(0, 10);

    if (bookedDatesSet.has(date)) {
      dayElem.classList.add("booked");
    }
  }
});

CSS-классы позволяют отделить визуальную логику от данных, формируя слой представления доступности.

Сегментация доступных окон

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

flatpickr("#booking", {
  mode: "range",
  enable: [
    function(date) {
      const day = date.getDay();
      return day >= 1 && day <= 5;
    }
  ]
});

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

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

При расширении бронирования до уровня времени активируется enableTime. Это добавляет точность выбора до минут.

flatpickr("#booking", {
  enableTime: true,
  time_24hr: true,
  dateFormat: "Y-m-d H:i"
});

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

Согласование фронтенда и серверной логики

Ключевой аспект резервирования — предотвращение гонок состояния. Flatpickr отвечает только за выбор, но не за подтверждение. После выбора диапазона данные проходят серверную проверку на актуальность.

Типовая схема включает:

  • выбор диапазона в Flatpickr
  • отправку данных на сервер
  • повторную валидацию доступности
  • фиксацию бронирования при отсутствии конфликтов

При обнаружении конфликта сервер возвращает обновлённый список занятых дат, который повторно применяется к disable.

Обновление состояния календаря

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

function refreshCalendar(disabledDates) {
  instance.destroy();

  instance = flatpickr("#booking", {
    mode: "range",
    disable: disabledDates
  });
}

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

Объединение правил бронирования

В реальных системах ограничения комбинируются:

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

Flatpickr в этом контексте выступает как слой отображения, где все правила сводятся к функциям disable, enable, onChange и onDayCreate, формируя единый механизм управления выбором дат без встроенной бизнес-логики.

Оглавление