Работа с годом в маске даты в Cleave.js требует точного понимания различий между двухзначным и четырёхзначным представлением и того, как библиотека интерпретирует вводимые символы. Ошибки на этом уровне почти всегда приводят к некорректной валидации, неоднозначным датам и сложностям при передаче данных на сервер.
В Cleave.js формат даты задаётся через параметр
date: true и массив datePattern, который
определяет структуру ввода:
d — деньm — месяцy — двухзначный годY — четырёхзначный годКлючевое различие заключается не только в количестве символов, но и в семантике: двухзначный год всегда неоднозначен, тогда как четырёхзначный полностью устраняет неопределённость.
Использование y в datePattern приводит к
тому, что год отображается и вводится в формате 00–99.
Пример конфигурации:
const cleave = new Cleave(input, {
date: true,
delimiter: '.',
datePattern: ['d', 'm', 'y']
});Поведение такого поля:
31.12.2424Двухзначный год не содержит информации о столетии. Это приводит к необходимости внешней нормализации:
24 (1924,
2024, 2124)Двухзначный год используется в ограниченных интерфейсах:
Однако в современных веб-приложениях этот подход считается рискованным.
Использование Y обеспечивает полное представление
года:
const cleave = new Cleave(input, {
date: true,
delimiter: '.',
datePattern: ['d', 'm', 'Y']
});Поведение:
31.12.20242024Главное преимущество — отсутствие неоднозначности:
Также снижается вероятность ошибок при интеграции с backend-системами, особенно если они используют строгие типы даты.
Cleave.js не выполняет полноценную семантическую интерпретацию даты. Его задача — форматирование ввода.
Это означает:
При этом важно учитывать, что:
При использовании y:
ввод: 0 1 0 1 2 4
результат: 01.01.24При использовании Y:
ввод: 0 1 0 1 2 0 2 4
результат: 01.01.2024Разница проявляется не только визуально, но и на уровне длины буфера ввода. Четырёхзначный год требует больше символов, что влияет на UX в мобильных интерфейсах.
При работе с годами критично различать отображаемое и «сырое» значение.
cleave.getRawValue();Поведение:
y: возвращается строка с двухзначным годомY: возвращается четырёхзначный годФорматированное значение:
cleave.getFormattedValue();Используется для отображения в интерфейсе, но не подходит для хранения без дополнительной проверки.
Если используется y, часто требуется ручная
нормализация:
function normalizeYear(year) {
const num = parseInt(year, 10);
if (num >= 0 && num <= 29) {
return 2000 + num;
}
return 1900 + num;
}Такая логика:
Cleave.js не предоставляет встроенного механизма расширения года до четырёхзначного.
yДата 01.01.00 может означать:
Без контекста невозможно выбрать правильное значение.
Строки:
01.01.99
01.01.00в лексикографическом порядке дают некорректный результат относительно реальной хронологии.
JavaScript Date при парсинге строк может трактовать двухзначные годы непредсказуемо в зависимости от окружения, что усиливает необходимость явного преобразования.
Y в реальных системахЧетырёхзначный год упрощает:
Также он снижает количество edge-case сценариев при миграциях данных.
В некоторых интерфейсах требуется переключение между форматами:
cleave.setOptions({
date: true,
delimiter: '.',
datePattern: ['d', 'm', 'Y']
});или
cleave.setOptions({
date: true,
delimiter: '.',
datePattern: ['d', 'm', 'y']
});При этом важно учитывать:
Y на
yХотя разделитель напрямую не связан с годом, он влияет на читаемость формата:
DD.MM.YYYY — наиболее однозначный визуальный
форматDD/MM/YY — компактный, но менее надёжныйDD-MM-YY — часто используется в локальных
интерфейсахЧем короче год, тем выше зависимость от контекста разделителей и локали.
На практике часто встречаются следующие ошибки:
y в публичных формах регистрацииy и Y в разных частях
системыКаждая из этих ошибок приводит к накоплению технического долга и усложняет поддержку системы.
При проектировании формы с Cleave.js логика года должна определяться не визуальными предпочтениями, а требованиями к данным:
YyРазделение ответственности между UI и backend должно быть чётко зафиксировано: Cleave.js отвечает только за форматирование ввода, а не за смысловую интерпретацию года.