Различные форматы дат

Inputmask поддерживает работу с датами через механизм масок и специализированный alias datetime, позволяющий описывать различные форматы ввода с учётом разделителей, порядка компонентов даты и ограничений на допустимые значения. Основная концепция заключается в том, что ввод пользователя структурируется по заранее заданному шаблону, где каждая позиция соответствует определённому числовому или символьному диапазону, а валидность формируется не только синтаксисом, но и правилами интерпретации даты.

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

день (dd)
месяц (mm)
год (yyyy или yy)
разделители (/, ., -, пробел и др.)

Каждый блок описывается через маску, которая ограничивает допустимые символы. Например, 99 означает строго две цифры, а [1-31] в расширенной логике alias может задавать диапазон для дня.

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

Форматы дат и их структурная реализация

Формат DD.MM.YYYY

Один из наиболее распространённых форматов, применяемый в европейских локалях:

99.99.9999

Логика маски:

первые две позиции — день
затем точка как фиксированный разделитель
следующие две позиции — месяц
снова точка
последние четыре позиции — год

При использовании alias datetime описание становится более семантическим:

Inputmask("datetime", {
  inputFormat: "dd.mm.yyyy"
}).mask(element);

В этом случае библиотека интерпретирует формат не как простую строку, а как структуру с правилами допустимых значений.

Особенность такого представления заключается в возможности контроля корректности диапазонов: месяц не может превышать 12, день — зависеть от месяца и года (в расширенных настройках).

Формат MM/DD/YYYY

Американская система записи даты отличается порядком компонентов и типом разделителя:

99/99/9999

или через alias:

Inputmask("datetime", {
  inputFormat: "mm/dd/yyyy"
}).mask(element);

Ключевая особенность — неоднозначность первых двух блоков. Маска допускает любые значения от 00 до 99 на уровне синтаксиса, но логическая валидация (если включена) ограничивает:

месяц: 01–12
день: 01–31 с учётом месяца

Разделитель / фиксирован и автоматически подставляется при вводе.

Формат YYYY-MM-DD (ISO 8601)

Наиболее строгий и универсальный формат:

9999-99-99

или:

Inputmask("datetime", {
  inputFormat: "yyyy-mm-dd"
}).mask(element);

Этот формат часто используется в API, базах данных и серверной логике. Его преимущества:

лексикографическая сортировка совпадает с хронологической
минимизация неоднозначностей
удобство парсинга

Особенности реализации:

год всегда вводится первым сегментом
дефис фиксирован как разделитель
поддерживается расширенная длина года (yyyy)

Алиас datetime и его внутренняя структура

Alias datetime в Inputmask представляет собой надстройку над базовыми масками, которая добавляет семантическое понимание даты.

Основные параметры:

inputFormat — входной формат
placeholder — отображаемый шаблон
separator — символы разделения (если не фиксированы форматом)
alias — переключение логики обработки

Пример:

Inputmask("datetime", {
  inputFormat: "dd-mm-yyyy",
  placeholder: "dd-mm-yyyy"
}).mask(element);

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

Разделители и их влияние на поведение маски

Разделитель — ключевой элемент восприятия даты. Он влияет не только на визуальную структуру, но и на поведение ввода.

Часто используемые варианты:

точка .
слэш /
дефис -
пробел (реже, в локализованных системах)

Inputmask трактует разделитель как фиксированный символ, который:

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

Пример вариативной настройки:

Inputmask("datetime", {
  inputFormat: "dd.mm.yyyy",
  separator: "."
}).mask(element);

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

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

Основные ограничения:

день: 1–31
месяц: 1–12
год: фиксированный диапазон (например, 1900–2099)
исключение некорректных комбинаций (например, 31 февраля)

Пример логической конфигурации:

Inputmask("datetime", {
  inputFormat: "dd/mm/yyyy",
  min: "01/01/1900",
  max: "31/12/2099"
}).mask(element);

В таких сценариях маска начинает работать как гибрид форматтера и валидатора.

Обработка неполных и промежуточных значений

В процессе ввода дата редко формируется сразу. Inputmask использует промежуточные состояния:

частично заполненный день (3_)
незавершённый месяц (12/0_)
незаполненный год (202_)

Для управления поведением применяются параметры:

clearIncomplete — очистка незавершённых значений
showMaskOnHover — отображение шаблона при наведении
showMaskOnFocus — отображение при фокусе

Пример:

Inputmask("datetime", {
  inputFormat: "yyyy-mm-dd",
  clearIncomplete: true
}).mask(element);

При включённой очистке незавершённая дата не сохраняется в поле.

Локализация и перестановка компонентов

Разные регионы используют разные порядки компонентов даты. Маска должна учитывать:

порядок (D/M/Y или Y/M/D)
символы разделения
длину года (yy vs yyyy)

Inputmask позволяет легко перестраивать формат без изменения логики:

Inputmask("datetime", {
  inputFormat: "yyyy/mm/dd"
}).mask(element);

или:

Inputmask("datetime", {
  inputFormat: "yy-mm-dd"
}).mask(element);

Использование двухзначного года требует дополнительной логики интерпретации, так как значение 24 может означать 1924 или 2024 в зависимости от контекста.

Маски с двухзначным годом

Формат dd/mm/yy часто применяется в компактных интерфейсах:

99/99/99

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

уменьшенный объём ввода
необходимость постобработки
потенциальная неоднозначность

Пример:

Inputmask("datetime", {
  inputFormat: "dd/mm/yy",
  placeholder: "dd/mm/yy"
}).mask(element);

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

Кастомные маски дат без alias datetime

Помимо alias, возможна ручная сборка маски:

99-99-9999

или с более строгими правилами:

Inputmask({
  mask: "99-99-9999",
  placeholder: "dd-mm-yyyy"
}).mask(element);

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

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

При вставке строки Inputmask пытается:

разобрать значение по сегментам
сопоставить разделители
нормализовать формат

Например, строка 2026-5-9 может быть преобразована в 2026-05-09 при включённой нормализации.

Автозаполнение работает по принципу:

недостающие цифры заменяются плейсхолдерами
курсор автоматически переходит к следующему сегменту
разделители вставляются без участия пользователя

Работа с пустыми значениями и очисткой поля

Пустое значение интерпретируется как отсутствие даты. Однако поведение зависит от конфигурации:

clearMaskOnLostFocus — очистка при потере фокуса
nullable — разрешение пустого состояния
greedy — контроль полноты заполнения

Пример:

Inputmask("datetime", {
  inputFormat: "dd.mm.yyyy",
  nullable: true
}).mask(element);

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

Маска даты часто используется совместно с внешней проверкой:

проверка календарной корректности
проверка бизнес-логики (например, возраст)
проверка диапазонов событий

Inputmask отвечает за формат, внешняя логика — за смысл.

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

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

В реальных приложениях чаще всего встречаются следующие конфигурации:

dd/mm/yyyy — европейская локализация
mm/dd/yyyy — американская локализация
yyyy-mm-dd — системный и API-формат
dd.mm.yyyy — локальные интерфейсы с точкой

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