Валидация формата

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

Формат даты и его спецификаторы

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

  • D — день месяца без ведущего нуля (1–31)
  • DD — день месяца с ведущим нулём (01–31)
  • M — месяц без ведущего нуля (1–12)
  • MM — месяц с ведущим нулём (01–12)
  • MMM — сокращённое название месяца (Jan, Feb, …)
  • MMMM — полное название месяца (January, February, …)
  • YY — двухзначный год
  • YYYY — четырёхзначный год

Эти токены используются как в параметре format при инициализации виджета, так и внутри методов toString() и parse() для контроля отображения и интерпретации даты.

Настройка формата через опцию format

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD/MM/YYYY'
});

В этом примере дата будет отображаться как 31/12/2026. Параметр format автоматически обеспечивает синхронизацию с внутренним объектом Date, гарантируя, что пользовательский ввод соответствует заданному шаблону.

Автоматическая валидация ввода

Pikaday выполняет базовую проверку формата при использовании текстового поля ввода. Если пользователь вводит дату, которая не соответствует шаблону format, виджет игнорирует её, не обновляя внутреннее значение. Таким образом, недопустимые строки не превращаются в некорректные объекты Date.

Пользовательская валидация через onSelect

Для более сложной проверки формата и дополнительных условий можно использовать колбэк onSelect:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD-MM-YYYY',
    onSelect: function(date) {
        var day = date.getDate();
        var month = date.getMonth() + 1;
        if (day > 28 && month === 2) {
            alert('Февраль не может иметь более 28 дней в невисокосном году');
        }
    }
});

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

Валидация с использованием регулярных выражений

Иногда требуется проверить формат ещё до передачи данных в Pikaday. Для этого можно использовать регулярные выражения:

var datePattern = /^\d{2}-\d{2}-\d{4}$/;
var input = document.getElementById('datepicker');

input.addEventListener('blur', function() {
    if (!datePattern.test(input.value)) {
        alert('Некорректный формат даты, используйте DD-MM-YYYY');
        input.value = '';
    }
});

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

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

Pikaday поддерживает параметры minDate и maxDate, которые можно использовать для валидации ввода:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'YYYY-MM-DD',
    minDate: new Date(2020, 0, 1),
    maxDate: new Date(2025, 11, 31)
});

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

Интеграция с moment.js для расширенной проверки

Для сложных сценариев валидации формата рекомендуется использовать moment.js. Пикэди можно настроить на работу с moment для парсинга и форматирования:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD/MM/YYYY',
    toString: function(date) {
        return moment(date).format('DD/MM/YYYY');
    },
    parse: function(dateString) {
        return moment(dateString, 'DD/MM/YYYY').toDate();
    }
});

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

Советы по надежной валидации

  • Использовать одинаковый формат для format, toString и parse, чтобы исключить несоответствия между вводом и внутренним объектом Date.
  • Комбинировать встроенные ограничения (minDate, maxDate) с пользовательской проверкой, особенно для критических приложений.
  • Проверять значения при blur или onSelect, чтобы пользователь видел обратную связь сразу после ввода.
  • При интеграции с внешними библиотеками (moment.js, dayjs) делегировать сложную проверку формата этим библиотекам для сокращения количества ошибок.

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

Оглавление