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

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

Основные возможности форматтера

Форматтер использует шаблоны, аналогичные библиотеке moment.js, но реализован внутри самой библиотеки Pikaday. Он позволяет преобразовывать объект Date в строку и обратно, поддерживая следующие ключевые элементы:

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

Форматтер работает синхронно при выборе даты пользователем, при вызове метода getDate() возвращает объект Date, а метод toString() или getMoment().format() (если используется MomentJS) позволяет получить строковое представление.

Настройка формата даты

Для задания формата даты используется параметр format:

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

В этом примере выбран день с ведущим нулём, месяц с ведущим нулём и полный четырёхзначный год. При выборе даты в поле ввода будет отображена строка вида 01/06/2026.

Форматтер позволяет использовать любой разделитель, включая -, ., пробел или любой пользовательский символ. Например:

format: 'YYYY.MM.DD'

Пользовательский парсер и форматтер

Иногда стандартный форматтер недостаточен, и требуется полностью контролировать процесс преобразования даты в строку и обратно. Для этого Pikaday предоставляет параметры toString и parse:

  • toString(date, format) — функция, преобразующая объект Date в строку по заданному формату.
  • parse(dateString, format) — функция, преобразующая строку в объект Date.

Пример пользовательского форматтера:

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD/MM/YYYY',
    toString: function(date, format) {
        const day = ('0' + date.getDate()).slice(-2);
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const year = date.getFullYear();
        return `${day}-${month}-${year}`; // возвращаем с дефисами вместо слэшей
    },
    parse: function(dateString, format) {
        const parts = dateString.split('-');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
});

В этом примере поле ввода будет отображать дату в формате 01-06-2026, а при вводе строки в этом формате календарь корректно создаст объект Date.

Интеграция с локализацией

Форматтер учитывает параметры локали (i18n) для названий месяцев и дней недели. При использовании формата MMM или MMMM Pikaday автоматически подставляет локализованные значения:

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD MMMM YYYY',
    i18n: {
        previousMonth : 'Пред',
        nextMonth     : 'След',
        months        : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        weekdays      : ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
        weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
    }
});

Здесь формат DD MMMM YYYY при выборе даты 1 июня 2026 будет отображать 01 Июнь 2026.

Обработка нестандартных форматов

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

Особенности работы форматтера

  • Форматтер всегда синхронизирован с внутренним состоянием календаря. Любые изменения в поле ввода автоматически обновляют объект Date в Pikaday.
  • Параметры toString и parse имеют приоритет над стандартным format.
  • Если формат не соответствует строке даты, выбранной пользователем, Pikaday возвращает null, что позволяет обрабатывать ошибки ввода.
  • Форматтер учитывает временную зону браузера при работе с объектами Date, но не управляет часовыми поясами напрямую. Для точного управления временем рекомендуется использовать MomentJS или Luxon в комбинации с Pikaday.

Советы по использованию

  • Всегда задавать формат даты, соответствующий пользовательским ожиданиям.
  • Для многоязычных приложений использовать параметр i18n совместно с форматами MMM и MMMM.
  • При сложных форматах реализовывать собственные функции toString и parse для полной гибкости.
  • Проверять корректность ввода даты и учитывать возможность null при некорректном формате.

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

Оглавление