Маски для дат и времени

Маски для дат и времени в библиотеке Inputmask используются для ограничения пользовательского ввода по заранее определённому формату. Такие маски позволяют:

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

Типичные сценарии:

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

Базовая маска даты

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

<input id="date">

Inputmask("99.99.9999").mask("#date");

Результат:

12.05.2026

Разбор шаблона

Символ	Назначение
`9`	обязательная цифра
`.`	фиксированный разделитель

Маска требует:

две цифры дня;
две цифры месяца;
четыре цифры года.

Использование alias для даты

Вместо ручного шаблона библиотека поддерживает готовые алиасы.

Пример:

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

Преимущества alias

Готовый alias:

понимает формат даты;
умеет валидировать диапазоны;
поддерживает автозаполнение;
корректно работает с курсором;
позволяет использовать расширенные параметры.

Форматы дат

Европейский формат

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

Пример:

31.12.2026

Американский формат

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

Пример:

12/31/2026

ISO-формат

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

Пример:

2026-12-31

ISO-формат часто используется:

в API;
базах данных;
JSON;
REST-сервисах.

Маска времени

Часы и минуты

Inputmask("datetime", {
    inputFormat: "HH:MM"
}).mask("#time");

Пример:

23:45

Расшифровка

Элемент	Значение
`HH`	часы
`MM`	минуты

Часы, минуты и секунды

Inputmask("datetime", {
    inputFormat: "HH:MM:ss"
}).mask("#time");

Пример:

18:22:09

Совмещённая дата и время

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

Пример:

15.08.2026 14:30

Такой формат часто применяется:

в CRM;
системах логирования;
календарях;
системах бронирования.

Автоматическая вставка разделителей

Inputmask автоматически добавляет:

точки;
двоеточия;
дефисы;
пробелы.

Код:

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

При вводе:

12052026

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

12/05/2026

Placeholder для даты

Стандартный placeholder

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    placeholder: "_"
}).mask("#date");

Отображение:

__.__.____

Пользовательский placeholder

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    placeholder: "д"
}).mask("#date");

Результат:

дд.дд.дддд

Очистка неполного ввода

Параметр clearIncomplete удаляет частично введённое значение.

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

Если пользователь ввёл:

12.0

после потери фокуса поле очистится.

Автоматическое удаление маски

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    clearMaskOnLostFocus: true
}).mask("#date");

При потере фокуса незаполненные части исчезают.

До:

12.__.____

После:

Валидация диапазонов

Одно из главных преимуществ alias datetime — встроенная проверка корректности даты.

Пример:

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

Некорректные значения:

45.18.2026
99.99.9999
32.13.2026

не будут приняты библиотекой.

Проверка високосного года

Inputmask корректно учитывает календарные правила.

Допустимо:

29.02.2024

Недопустимо:

29.02.2025

Использование min и max

Минимальная дата

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    min: "01.01.2020"
}).mask("#date");

Максимальная дата

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    max: "31.12.2030"
}).mask("#date");

Ограничение диапазона

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    min: "01.01.2020",
    max: "31.12.2030"
}).mask("#date");

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

12-часовой формат времени

Inputmask("datetime", {
    inputFormat: "hh:MM TT"
}).mask("#time");

Пример:

11:45 PM

Обозначения

Формат	Описание
`hh`	часы 1–12
`TT`	AM/PM

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

Inputmask("datetime", {
    inputFormat: "HH:MM"
}).mask("#time");

Пример:

22:10

Поддержка секунд и миллисекунд

Inputmask("datetime", {
    inputFormat: "HH:MM:ss.l"
}).mask("#time");

Пример:

14:25:11.532

Маска для месяца и года

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

Пример:

05/2026

Используется:

в банковских формах;
сроках действия карт;
отчётах;
статистике.

Маска только для года

Inputmask("datetime", {
    inputFormat: "yyyy"
}).mask("#year");

Пример:

Автоматическое дополнение года

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    prefillYear: true
}).mask("#date");

При вводе:

12.05.26

библиотека может автоматически дополнить год.

Lazy-режим placeholder

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    showMaskOnHover: false,
    showMaskOnFocus: true
}).mask("#date");

Поведение

Событие	Результат
hover	маска скрыта
focus	маска отображается

Использование inputmode

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

<input id="date" inputmode="numeric">

Совместно с маской:

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

Обработка вставки текста

Inputmask корректно работает с paste-событиями.

Вставка:

12052026

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

12.05.2026

Удаление символов и работа Backspace

Библиотека:

сохраняет структуру маски;
не позволяет удалить разделители случайно;
корректно смещает курсор;
поддерживает редактирование середины строки.

Маски для HTML5 input type=“date”

Особенности

Маски обычно применяются к:

<input type="text">

Использование:

<input type="date">

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

Поэтому чаще применяется:

<input type="text" id="date">

Локализация форматов

Разные страны используют разные форматы даты.

Европа

dd.mm.yyyy

США

mm/dd/yyyy

Азия

yyyy-mm-dd

Inputmask позволяет легко переключать формат:

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

Использование alias shortcuts

Некоторые форматы можно задавать сокращённо.

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

Маска времени для расписаний

Inputmask("datetime", {
    inputFormat: "HH:MM"
}).mask(".schedule-time");

Примеры:

08:00
12:30
19:45

Работа с динамическими формами

Маска может применяться к новым элементам после загрузки страницы.

document.querySelectorAll(".date-field").forEach(el => {
    Inputmask("datetime", {
        inputFormat: "dd.mm.yyyy"
    }).mask(el);
});

Удаление маски

Inputmask.remove("#date");

После удаления поле становится обычным input.

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

const im = document.querySelector("#date").inputmask;

console.log(im.isComplete());

Результат:

true
false

Получение неформатированного значения

const value = document.querySelector("#date").inputmask.unmaskedvalue();

console.log(value);

Для даты:

12052026

Получение форматированного значения

const value = document.querySelector("#date").value;

console.log(value);

Результат:

12.05.2026

Использование oncomplete

Событие полного заполнения маски:

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    oncomplete() {
        console.log("Дата введена");
    }
}).mask("#date");

Использование onincomplete

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    onincomplete() {
        console.log("Дата заполнена не полностью");
    }
}).mask("#date");

Использование oncleared

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    oncleared() {
        console.log("Поле очищено");
    }
}).mask("#date");

Интеграция с формами

<form id="form">
    <input id="date">
    <button>Отправить</button>
</form>

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

document.querySelector("#form").addEventListener("submit", e => {
    const field = document.querySelector("#date");

    if (!field.inputmask.isComplete()) {
        e.preventDefault();
    }
});

Типичные ошибки

Использование обычной маски вместо datetime

Нежелательно:

Inputmask("99.99.9999")

Такой вариант:

не проверяет диапазоны;
не знает о календаре;
не валидирует февраль;
не учитывает високосные годы.

Предпочтительно:

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

Неверный формат минут

Ошибка:

HH:mm

В Inputmask:

MM — минуты;
mm — месяц.

Правильно:

HH:MM

Конфликт с autocomplete

Иногда браузерный autocomplete мешает работе маски.

Решение:

<input autocomplete="off">

Практический пример

<input id="booking-date">
<input id="booking-time">

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",
    min: "01.01.2025",
    max: "31.12.2030",
    clearIncomplete: true
}).mask("#booking-date");

Inputmask("datetime", {
    inputFormat: "HH:MM"
}).mask("#booking-time");

Поведение:

дата ограничена диапазоном;
время вводится в 24-часовом формате;
неполные значения автоматически очищаются;
структура ввода поддерживается библиотекой автоматически.