Ограничение диапазона времени

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

Основные ограничения задаются через параметры minTime, maxTime, а также через динамическое управление состоянием календаря и времени после инициализации.

Базовые ограничения времени: minTime и maxTime

Параметры minTime и maxTime задают нижнюю и верхнюю границу доступного времени. Они работают в связке с режимом выбора времени, который включается через enableTime.

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  minTime: "09:00",
  maxTime: "18:00"
});

В данной конфигурации:

  • доступное время начинается с 09:00
  • заканчивается в 18:00
  • календарная часть отключена через noCalendar
  • формат вывода ограничен часами и минутами

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

Форматы задания времени

Параметры minTime и maxTime принимают строковое представление времени в 24-часовом формате:

  • "HH:MM"
  • "HH:MM:SS" (при использовании секунд)

Пример с секундами:

flatpickr("#timeInput", {
  enableTime: true,
  enableSeconds: true,
  time_24hr: true,
  minTime: "08:30:15",
  maxTime: "17:45:30"
});

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

Ограничение времени при наличии календаря

Если noCalendar отключён, ограничения времени применяются внутри каждого выбранного дня. Это важно для сценариев, где дата и время выбираются совместно.

flatpickr("#dateTimeInput", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minTime: "10:00",
  maxTime: "20:00"
});

В этом режиме:

  • дата выбирается свободно (если не задан minDate/maxDate)
  • время внутри каждой даты ограничено одинаковым диапазоном

Связка minDate/maxDate и времени

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

flatpickr("#dateTimeInput", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minDate: "2026-06-01",
  maxDate: "2026-06-10",
  minTime: "09:00",
  maxTime: "17:00"
});

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

  • minTime и maxTime применяются ко всем дням одинаково
  • для разных дат необходима динамическая логика

Динамическое ограничение времени

Flatpickr поддерживает изменение параметров после инициализации через метод set.

const fp = flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i"
});

fp.set("minTime", "07:00");
fp.set("maxTime", "12:00");

Это позволяет изменять доступный диапазон времени в зависимости от внешних условий, например:

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

Ограничение времени в зависимости от даты

Для сценариев, где диапазон времени зависит от конкретного дня, используется обработчик onChange.

flatpickr("#dateTimeInput", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  onChange: function(selectedDates, dateStr, instance) {
    const selectedDate = selectedDates[0];

    if (!selectedDate) return;

    const day = selectedDate.getDay();

    if (day === 0 || day === 6) {
      instance.set("minTime", "10:00");
      instance.set("maxTime", "16:00");
    } else {
      instance.set("minTime", "08:00");
      instance.set("maxTime", "20:00");
    }
  }
});

В данной логике:

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

Ограничение шагов времени через minuteIncrement и hourIncrement

Хотя данные параметры напрямую не задают диапазон, они влияют на доступные значения внутри него.

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  minTime: "08:00",
  maxTime: "18:00",
  hourIncrement: 2,
  minuteIncrement: 15
});

Поведение:

  • часы доступны с шагом 2 (08, 10, 12, …)
  • минуты доступны с шагом 15 (00, 15, 30, 45)
  • значения вне диапазона автоматически исключаются

Взаимодействие с 12/24-часовым форматом

При использовании параметра time_24hr формат отображения влияет только на визуализацию, но не на внутренние ограничения.

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  time_24hr: false,
  minTime: "09:00 AM",
  maxTime: "05:00 PM"
});

Особенности:

  • при time_24hr: false используется AM/PM формат
  • значения minTime и maxTime должны соответствовать формату отображения
  • внутреннее сравнение нормализуется библиотекой

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

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

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  minTime: "08:00",
  maxTime: "18:00",
  disable: [
    "12:00",
    "12:30",
    "13:00"
  ]
});

В этом случае:

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

Поведение при ручном вводе значения

При включённом вводе с клавиатуры Flatpickr валидирует значение на уровне парсинга строки:

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

Пример:

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  minTime: "09:00",
  maxTime: "17:00",
  allowInput: true
});

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

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

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

function getWorkingHours(date) {
  const isHoliday = date.getDay() === 0;

  return {
    min: isHoliday ? "10:00" : "08:00",
    max: isHoliday ? "14:00" : "18:00"
  };
}

flatpickr("#timeInput", {
  enableTime: true,
  noCalendar: true,
  onChange: function(selectedDates, dateStr, instance) {
    const date = selectedDates[0];
    if (!date) return;

    const range = getWorkingHours(date);

    instance.set("minTime", range.min);
    instance.set("maxTime", range.max);
  }
});

Такой подход позволяет:

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

Ограничения при использовании вместе с таймзонами

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

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

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

Комбинированные сценарии ограничений

Реальные интерфейсы часто используют несколько уровней ограничений:

  • диапазон дат (minDate, maxDate)
  • диапазон времени (minTime, maxTime)
  • точечные исключения (disable)
  • динамическое обновление через события
  • шаг выбора (minuteIncrement, hourIncrement)
flatpickr("#dateTimeInput", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  minDate: "today",
  maxDate: new Date().fp_incr(30),
  minTime: "09:00",
  maxTime: "18:00",
  minuteIncrement: 30,
  disable: ["12:00", "12:30"]
});

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

Оглавление