Параметр format

Параметр format определяет строковое представление даты, которое будет отображаться в связанном текстовом поле (input) при выборе значения в календаре. Это один из ключевых механизмов управления пользовательским выводом, так как он влияет не на внутреннее хранение даты (всегда используется объект Date), а исключительно на визуализацию.

Назначение и базовый принцип работы

Внутри Pikaday даты хранятся как экземпляры Date. Параметр format отвечает за преобразование этого объекта в строку при отображении в поле ввода.

При выборе даты происходит следующий процесс:

  1. Пользователь выбирает день в календаре
  2. Создаётся объект Date
  3. Этот объект передаётся в функцию форматирования
  4. Результат записывается в input.value

Таким образом, format является слоем представления, отделённым от логики хранения данных.

Типы значения параметра format

Строковый формат

Наиболее распространённый вариант — строка, описывающая шаблон даты.

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

В этом случае дата будет отображаться в виде:

24.01.2026

Поддерживаемые токены форматирования

Если доступен встроенный форматтер или подключён Moment.js, используются стандартные токены:

День

  • D — день месяца без ведущего нуля (1–31)
  • DD — день месяца с ведущим нулём (01–31)

Месяц

  • M — месяц (1–12)
  • MM — месяц с ведущим нулём (01–12)

Год

  • YY — последние две цифры года
  • YYYY — полный год (например, 2026)

Дополнительные элементы

  • d — день недели (числовой индекс)
  • dd — короткое название дня недели (зависит от локали)
  • ddd — сокращённое название дня
  • dddd — полное название дня

Примеры строковых форматов

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

format: 'DD/MM/YYYY'

Результат:

24/01/2026

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

format: 'MM/DD/YYYY'

Результат:

01/24/2026

Формат с текстовым месяцем

format: 'DD MMMM YYYY'

Результат:

24 January 2026

Компактный числовой формат

format: 'YYYYMMDD'

Результат:

20260124

Поведение при отсутствии сторонних библиотек

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

Обычно доступны базовые шаблоны:

  • DD
  • MM
  • YYYY

Более сложные конструкции могут не интерпретироваться или работать частично.

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

Параметр format может принимать функцию, возвращающую строку. Это позволяет полностью контролировать форматирование.

Сигнатура

format: function(date) {
    return '...';
}

Пример кастомного форматирования

new Pikaday({
    field: document.getElementById('datepicker'),
    format: function(date) {
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();

        return `${year}-${month}-${day}`;
    }
});

Результат:

2026-1-24

Отличие функции format от внешних форматтеров

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

Это означает:

  • игнорируются все шаблоны строкового формата
  • не используется Moment.js или аналогичные библиотеки
  • разработчик полностью контролирует результат

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

Параметр format тесно связан с локализацией, но не зависит от неё напрямую.

Pikaday позволяет задавать i18n-настройки (названия месяцев, дней недели), однако format определяет структуру строки.

Пример комбинированного поведения:

new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD MMMM YYYY',
    i18n: {
        months: ['Январь', 'Февраль', 'Март', ...],
        weekdays: ['Вс', 'Пн', 'Вт', ...]
    }
});

Результат:

24 Январь 2026

Влияние Moment.js на форматирование

При подключённой библиотеке Moment.js форматирование становится более гибким и стандартизированным.

Пример с Moment.js

new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'dddd, MMMM Do YYYY'
});

Результат:

Saturday, January 24th 2026

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

  • поддержка расширенных токенов (Do, MMMM, dddd)
  • корректная локализация
  • обработка порядковых числительных (1st, 2nd, 3rd)

Частые ошибки при использовании format

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

Если пользователь вручную вводит дату, не соответствующую format, возможны проблемы при парсинге.

format: 'DD-MM-YYYY'

Ввод:

2026/01/24

Результат: некорректная интерпретация или сброс значения.

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

format: 'DD/MM/YY'

Проблема:

  • 02/03/04 может интерпретироваться неоднозначно

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

Несоответствие формата серверу

Частая архитектурная ошибка — различие между клиентским format и форматом, ожидаемым backend.

Например:

format: 'DD.MM.YYYY'

Но сервер ожидает:

YYYY-MM-DD

Решение обычно заключается в разделении:

  • отображаемый формат (format)
  • транспортный формат (отдельная сериализация)

Практика безопасного использования

Разделение отображения и хранения

Pikaday всегда хранит Date, поэтому рекомендуется:

  • использовать format только для UI
  • не использовать строку input.value как источник истины

Пример правильной архитектуры

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD.MM.YYYY',
    onSelect: function(date) {
        const iso = date.toISOString();
        console.log(iso);
    }
});

Здесь:

  • format управляет отображением
  • onSelect используется для передачи данных в стандартном формате

Поведение при пустых или некорректных значениях

Если дата отсутствует:

  • поле остаётся пустым
  • форматирование не вызывается

Если передан некорректный Date:

  • результат зависит от реализации formatter-а
  • может вернуться Invalid Date или пустая строка

Производительность форматирования

Строковый format:

  • быстрый
  • не требует дополнительных вычислений

Функциональный format:

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

В типичных сценариях разница незаметна, но при массовых перерисовках стоит учитывать нагрузку.

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

Стандартный UI формат

format: 'DD.MM.YYYY'

Подходит для локальных интерфейсов с европейским стилем даты.

Международный формат

format: 'YYYY-MM-DD'

Используется для совместимости и API-интеграций.

Расширенный человекочитаемый формат

format: 'DD MMMM YYYY'

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

Полный контроль через функцию

format: (date) => date.toLocaleDateString('ru-RU')

Используется при необходимости интеграции с локальными API форматирования JavaScript.

Оглавление