Настройка разделителей времени

Базовый принцип работы с временными разделителями

Форматирование времени в Cleave.js основано на разбиении пользовательского ввода на логические блоки — часы, минуты и секунды. Между этими блоками автоматически вставляются разделители, которые определяются конфигурацией. Основная цель механизма — обеспечить единообразный формат времени при вводе без необходимости ручной обработки строки.

Ключевой особенностью является то, что разделитель времени не является самостоятельной сущностью: он привязан к структуре шаблона. При изменении структуры (например, переход от HH:mm к HH:mm:ss) изменяется и количество разделителей.

Включение режима времени

Для активации форматирования времени используется параметр:

new Cleave(input, {
    time: true
});

В этом режиме библиотека автоматически:

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

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

Стандартный разделитель :

Двоеточие является базовым символом, применяемым в большинстве конфигураций времени:

  • HH:mm → 14:35
  • HH:mm:ss → 14:35:09

Поведение разделителя:

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

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

Управление структурой времени через timePattern

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

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm']
});

В этом случае формат становится:

  • HH:mm

При расширении:

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm', 's']
});

Формат автоматически превращается в:

  • HH:mm:ss

Разделитель : добавляется между каждым соседним элементом массива timePattern. Таким образом:

  • 2 элемента → 1 разделитель
  • 3 элемента → 2 разделителя

Изменение разделителя времени

Хотя стандартом является :, в некоторых интерфейсах требуется иной визуальный стиль. В Cleave.js это реализуется через глобальный параметр delimiter.

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm'],
    delimiter: '.'
});

Результат:

  • 14.35

При использовании трёх сегментов:

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm', 's'],
    delimiter: '-'
});

Результат:

  • 14-35-09

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

  • применяется ко всем сегментам;
  • заменяет стандартный :;
  • влияет только на отображение, но не на внутреннюю структуру данных;
  • сохраняется при редактировании отдельных блоков.

Поведение разделителей при вводе

Разделители времени ведут себя динамически в зависимости от состояния ввода:

  1. Автоматическая вставка При достижении границы сегмента разделитель появляется без действия пользователя.

  2. Смещение при редактировании При удалении символов внутри сегмента разделитель временно исчезает и восстанавливается после корректировки.

  3. Защита от дублирования Ввод символа разделителя вручную игнорируется, если он уже присутствует в нужной позиции.

  4. Синхронизация с маской Разделители не нарушают позиционирование курсора, так как библиотека перерассчитывает индекс ввода.

Работа с 12- и 24-часовым форматом

Хотя разделители остаются одинаковыми, логика их окружения зависит от формата времени.

24-часовой формат:

  • 00:00 — 23:59

12-часовой формат (через кастомную обработку):

  • 01:30 AM / PM логика реализуется внешне

Cleave.js не добавляет AM/PM автоматически в базовом time-режиме, но разделители продолжают работать идентично.

Особенности нормализации значений

При потере фокуса библиотека выполняет выравнивание сегментов:

  • неполный ввод дополняется нулями;
  • разделители сохраняют позицию;
  • лишние символы удаляются.

Пример:

Ввод:

1:2:3

После нормализации:

01:02:03

Разделители при этом не изменяются и служат фиксированной структурной сеткой.

Влияние разделителей на rawValue

Внутреннее значение (rawValue) хранится без разделителей:

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm', 's']
});

Ввод:

14:35:09

rawValue:

143509

Это важно при:

  • отправке данных на сервер;
  • сравнении времени;
  • математической обработке значений.

Разделители существуют только на уровне представления и не влияют на rawValue.

Кастомные сценарии отображения

Разделители времени могут быть адаптированы под нестандартные интерфейсы:

Использование пробела как разделителя
new Cleave(input, {
    time: true,
    timePattern: ['h', 'm', 's'],
    delimiter: ' '
});

Результат:

14 35 09
Использование смешанного формата (визуальная адаптация)

В некоторых интерфейсах требуется визуальное разделение без строгого символа:

new Cleave(input, {
    time: true,
    timePattern: ['h', 'm', 's'],
    delimiter: '\u2009'
});

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

Ограничения механизма разделителей

Несмотря на гибкость, система имеет ряд ограничений:

  • нельзя задать разные разделители для разных сегментов;
  • разделитель всегда одинаковый по всей цепочке;
  • невозможна вложенная структура времени (например, дни + время в одном поле без кастомной логики);
  • визуальный формат отделён от реального значения, но не поддерживает независимую локализацию форматов (например, HH.mm.ss с разными правилами для сегментов).

Поведение при динамическом изменении конфигурации

Если параметры изменяются во время работы:

cleaveInstance.setRawValue('123456');

или пересоздание экземпляра:

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

Это означает, что разделители времени полностью зависят от текущего timePattern и delimiter, а не от исходного ввода пользователя.

Оглавление