Планировщик с датами и временем

Библиотека Cleave.js предоставляет удобный механизм для форматирования и ограничения ввода данных в полях формы, включая работу с датами и временем. Для полей дат и времени она обеспечивает автоматическое добавление разделителей, контроль допустимых значений и синхронизацию формата ввода с требованиями бизнес-логики.

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

Настройка ввода даты

Для поля даты используется параметр date, который может быть включен вместе с указанием формата через datePattern. Например, формат DD/MM/YYYY разделяет день, месяц и год с помощью слэшей.

const dateInput = new Cleave('.date-input', {
    date: true,
    datePattern: ['d', 'm', 'Y']
});

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

  • datePattern определяет последовательность блоков даты. Допустимые значения: d (день), m (месяц), Y (год).
  • Автоматическое добавление разделителей позволяет пользователю вводить данные без ошибок форматирования.
  • Cleave.js обеспечивает базовую проверку корректности даты (например, недопустимые дни в месяце).

Можно использовать нестандартные разделители, задавая их через delimiter:

const dateInput = new Cleave('.date-input', {
    date: true,
    datePattern: ['d', 'm', 'Y'],
    delimiter: '-'
});

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

Для работы с временем используется конфигурация time, поддерживающая форматы HH:mm и HH:mm:ss.

const timeInput = new Cleave('.time-input', {
    time: true,
    timePattern: ['h', 'm']
});

Ключевые моменты:

  • timePattern задает последовательность блоков: h (часы), m (минуты), s (секунды, если используется).
  • Cleave.js автоматически ограничивает значения: часы от 0 до 23, минуты и секунды от 0 до 59.
  • Возможна кастомизация разделителей между блоками времени.

Комплексные комбинации даты и времени

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

const datetimeInput = new Cleave('.datetime-input', {
    date: true,
    time: true,
    datePattern: ['d', 'm', 'Y'],
    timePattern: ['h', 'm'],
    delimiter: ' ',
    timeDelimiter: ':'
});

Пояснения:

  • Разделитель между датой и временем (delimiter) может отличаться от разделителя внутри времени (timeDelimiter).
  • Поддерживается синхронизация блоков: нельзя ввести некорректное сочетание даты и времени.

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

Cleave.js позволяет накладывать дополнительные ограничения на ввод, используя опцию blocks и numericOnly для создания масок под специфические требования.

Пример маски даты с ограничением на двухзначные числа для дней и месяцев и четырехзначные для года:

const maskedDate = new Cleave('.masked-date', {
    blocks: [2, 2, 4],
    delimiters: ['/', '/'],
    numericOnly: true
});

Преимущества масок:

  • Полный контроль над количеством вводимых символов.
  • Возможность создавать нестандартные форматы даты и времени.
  • Защита от ошибок ввода на уровне интерфейса.

Интеграция с календарными виджетами

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

  • Cleave.js обеспечивает корректный формат даты при ручном вводе.
  • Взаимодействие с виджетом позволяет динамически обновлять значения и синхронизировать с внутренними данными планировщика.

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

const datePicker = new Cleave('.calendar-input', {
    date: true,
    datePattern: ['Y', 'm', 'd']
});

// Событие изменения через виджет
calendarWidget.onChange(date => {
    datePicker.setRawValue(date);
});

Работа с локалями и пользовательскими форматами

Для международных приложений Cleave.js позволяет легко менять порядок блоков даты и выбирать соответствующие разделители в зависимости от локали:

  • DD/MM/YYYY для Европы
  • MM/DD/YYYY для США
  • YYYY-MM-DD для ISO стандартов
const isoDateInput = new Cleave('.iso-date', {
    date: true,
    datePattern: ['Y', 'm', 'd'],
    delimiter: '-'
});

Управление событиями и динамическое обновление

Cleave.js предоставляет методы для программного управления значениями:

  • getRawValue() — получение значения без разделителей.
  • getFormattedValue() — получение значения с текущими разделителями.
  • setRawValue(value) — установка нового значения с автоматическим форматированием.
const dateCleave = new Cleave('.date-input', {
    date: true,
    datePattern: ['d', 'm', 'Y']
});

dateCleave.setRawValue('15052026'); // Автоформатирует в 15/05/2026
console.log(dateCleave.getFormattedValue()); // 15/05/2026

Поддержка динамических форм

Для планировщиков с динамически создаваемыми полями даты и времени Cleave.js можно подключать к новым элементам через делегирование или программное создание экземпляров Cleave:

document.querySelectorAll('.dynamic-date').forEach(input => {
    new Cleave(input, {
        date: true,
        datePattern: ['d', 'm', 'Y']
    });
});

Это обеспечивает единообразный ввод и форматирование во всех полях, независимо от способа их создания на странице.

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

  • Форматирование даты и времени с автоматическим добавлением разделителей.
  • Контроль корректности ввода и допустимых значений.
  • Возможность комбинирования даты и времени в одном поле.
  • Поддержка масок и кастомных блоков для нестандартных форматов.
  • Интеграция с календарными виджетами и динамическими формами.
  • Работа с локалями и международными стандартами.
  • Программное управление значениями через API методов Cleave.js.

Эти возможности делают Cleave.js удобным инструментом для создания сложных планировщиков, где точность и корректность ввода даты и времени имеют критическое значение.

Оглавление