Параметр minuteIncrement

Параметр minuteIncrement определяет шаг изменения минут в интерфейсе выбора времени. Он влияет на то, какими значениями будут «перекручиваться» минуты в выпадающем списке или при использовании стрелок увеличения/уменьшения в поле времени.

По умолчанию Flatpickr использует значение 1, что означает полный диапазон минут от 0 до 59 с шагом в одну минуту. При изменении этого параметра список минут становится дискретным, ограниченным заданным интервалом.

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

Без явного указания параметра:

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

Минуты отображаются так:

00, 01, 02, 03, ... 59

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

Изменение шага минут

Основная задача minuteIncrement — ограничить доступные значения минут определённым интервалом.

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

В этом случае список минут преобразуется в:

00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55

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

Логика округления

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

Пример:

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

Если установить время 12:07, библиотека может интерпретировать его как:

12:10

Если значение ближе к предыдущему шагу — округление происходит вниз, если ближе к следующему — вверх. Поведение зависит от внутренней логики нормализации времени.

Влияние на ввод с клавиатуры

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

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

Это особенно заметно при использовании небольших шагов вроде 5, 10, 15.

Комбинация с 24-часовым и 12-часовым режимом

minuteIncrement не зависит от формата отображения часов (time_24hr). Он работает одинаково в обоих режимах:

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

И:

flatpickr("#input", {
  enableTime: true,
  time_24hr: false,
  minuteIncrement: 15
});

В обоих случаях минуты будут представлены с шагом 15, независимо от AM/PM или 24-часового формата.

Использование в бизнес-логике интерфейса

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

  • расписания, работающие с интервалом 15 минут;
  • бронирование слотов по 30 минут;
  • логистика и планирование задач с фиксированными временными окнами.

Пример конфигурации для 30-минутных интервалов:

flatpickr("#bookingTime", {
  enableTime: true,
  minuteIncrement: 30,
  time_24hr: true
});

Результат выбора времени:

00, 30

Ограничения и особенности

При работе с minuteIncrement важно учитывать несколько особенностей внутренней модели Flatpickr:

  • параметр влияет только на UI-слой и нормализацию ввода;
  • он не ограничивает дату целиком, а только минутную часть времени;
  • значения должны быть положительными целыми числами;
  • при некорректных значениях (например, 0 или отрицательных) поведение может становиться непредсказуемым.

Влияние на доступные временные диапазоны

Когда используется совместно с minTime и maxTime, шаг минут автоматически вписывается в допустимый диапазон.

Пример:

flatpickr("#input", {
  enableTime: true,
  minTime: "09:00",
  maxTime: "18:00",
  minuteIncrement: 20
});

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

Поведение при нестандартных значениях

Если установить minuteIncrement в значение, которое не делит равномерно 60, например 7, список минут будет строиться с остатком:

00, 07, 14, 21, 28, 35, 42, 49, 56

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

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

Параметр задаётся только при инициализации, но может быть изменён через переинициализацию экземпляра:

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

fp.destroy();

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

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

Оглавление