Параметр hourIncrement

Назначение параметра

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

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

Базовое поведение

По умолчанию Flatpickr использует шаг 1 час, если не указано иное значение:

flatpickr("#input", {
  enableTime: true
});

В этом случае пользователь может выбрать любой час от 0 до 23 (или 1–12 при 12-часовом формате), изменяя значение по единице.

Если задать hourIncrement, шаг изменяется:

flatpickr("#input", {
  enableTime: true,
  hourIncrement: 2
});

Теперь доступные значения часов будут: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22.

Тип значения и допустимые диапазоны

hourIncrement принимает целое положительное число.

Рекомендуемые значения:

  • 1 — стандартное поведение (каждый час доступен)
  • 2 — выбор через час
  • 3, 4, 6 — для укрупнённых временных сеток
  • 12 — половина суток (полезно для упрощённых расписаний)

Нежелательные значения:

  • 0 — логически некорректно, приводит к неконтролируемому поведению
  • отрицательные числа — не поддерживаются

Влияние на интерфейс Flatpickr

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

1. Кнопки увеличения/уменьшения

Стрелки изменения времени (если включён time picker) будут менять часы на величину hourIncrement.

Пример:

{
  enableTime: true,
  hourIncrement: 3
}

Результат:

  • 0 → 3 → 6 → 9 → 12 → 15 → 18 → 21
2. Валидация введённого значения

При ручном вводе Flatpickr нормализует значение в соответствии с шагом:

  • введённое значение округляется вниз или вверх до ближайшего допустимого
  • либо корректируется при потере фокуса (blur)

Например при hourIncrement: 2:

  • ввод 5 может быть преобразован в 4 или 6 (в зависимости от конфигурации и версии)
  • ввод 13 может быть скорректирован до 12 или 14
3. Ограничение набора значений

В некоторых режимах (особенно при использовании dropdown или scroll UI) список доступных часов фактически строится на основе hourIncrement.

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

hourIncrement работает независимо от формата отображения времени, но визуальное поведение отличается.

24-часовой формат
flatpickr("#input", {
  enableTime: true,
  time_24hr: true,
  hourIncrement: 4
});

Значения:

0, 4, 8, 12, 16, 20

Диапазон полный, шаг равномерный.

12-часовой формат
flatpickr("#input", {
  enableTime: true,
  time_24hr: false,
  hourIncrement: 3
});

Значения часов:

1, 4, 7, 10 (AM/PM переключается отдельно)

Важно учитывать:

  • AM/PM не влияет на шаг
  • шаг применяется только к числу часов
  • при переходе через 12 происходит смена половины суток

Взаимодействие с minuteIncrement

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

Пример:

flatpickr("#input", {
  enableTime: true,
  hourIncrement: 2,
  minuteIncrement: 15
});

Возможные значения:

  • 10:00
  • 10:15 (если не ограничено шагом часов)
  • 12:30
  • 14:45

Однако важно понимать, что:

  • hourIncrement влияет только на часы
  • minuteIncrement — только на минуты
  • они не синхронизированы автоматически

Практические сценарии использования

1. Система бронирования
flatpickr("#booking", {
  enableTime: true,
  hourIncrement: 1,
  minuteIncrement: 30
});

Результат:

  • интервалы по 30 минут
  • каждый час доступен полностью
2. Рабочие смены
flatpickr("#shift", {
  enableTime: true,
  hourIncrement: 4,
  time_24hr: true
});

Используется для смен:

  • 00:00
  • 04:00
  • 08:00
  • 12:00
  • 16:00
  • 20:00
3. Упрощённый выбор времени
flatpickr("#quickTime", {
  enableTime: true,
  hourIncrement: 6
});

Минимизация выбора:

  • 0
  • 6
  • 12
  • 18

Особенности поведения при пользовательском вводе

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

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

  • ввод вне сетки может быть округлён
  • при потере фокуса значение нормализуется
  • при программной установке (setDate) возможна автоматическая коррекция

Пример:

instance.setDate("10:37");

При hourIncrement: 2 результат может быть скорректирован до ближайшего допустимого часа, например 10:00 или 12:00.

Программное влияние через API

Flatpickr не предоставляет отдельного метода для изменения hourIncrement после инициализации, поэтому:

  • параметр задаётся только при создании экземпляра
  • изменение требует переинициализации компонента

Пример пересоздания:

const fp = flatpickr("#input", {
  enableTime: true,
  hourIncrement: 1
});

fp.destroy();

flatpickr("#input", {
  enableTime: true,
  hourIncrement: 3
});

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

1. Несовпадение с бизнес-логикой

Если сервер ожидает строго фиксированные временные слоты, но hourIncrement задан иначе, возможно рассогласование.

2. Конфликт с minTime и maxTime

При задании ограничений времени:

{
  enableTime: true,
  minTime: "10:00",
  maxTime: "18:00",
  hourIncrement: 3
}

Возможны ситуации:

  • некоторые шаги могут попадать вне диапазона
  • Flatpickr будет их автоматически отбрасывать или корректировать
3. Неочевидная нормализация

При сложных комбинациях параметров:

  • disable
  • enable
  • minTime
  • maxTime
  • hourIncrement

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

Поведение в разных режимах UI

При отображении списка значений hourIncrement формирует набор доступных пунктов.

Spinner режим

Стрелки увеличивают значение строго по шагу.

Keyboard input

При использовании клавиатуры (стрелки вверх/вниз):

  • шаг также соответствует hourIncrement
  • удержание клавиши ускоряет изменение, но сохраняет кратность

Рекомендации по применению

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

Типичные ошибки при использовании

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

Взаимодействие с форматированием времени

При использовании dateFormat:

{
  enableTime: true,
  hourIncrement: 2,
  dateFormat: "Y-m-d H:i"
}

Форматирование не изменяет шаг, но влияет на отображение результата. Flatpickr всегда хранит внутреннее значение согласно установленному шагу, независимо от формата вывода.

Итоговая модель поведения параметра

hourIncrement можно рассматривать как дискретизатор оси времени по часам:

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