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

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

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

Формат даты управляется через параметр format при создании экземпляра Pikaday. Он задаёт порядок отображения дня, месяца и года, а также разделители. Например:

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD.MM.YYYY'  // день.месяц.год
});

Поддерживаются следующие токены формата:

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

Формат можно менять динамически через метод setOptions:

picker.setOptions({ format: 'YYYY/MM/DD' });

Локализация названий месяцев и дней недели

Pikaday позволяет полностью изменить подписи месяцев и дней недели через опции i18n и firstDay:

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    i18n: {
        previousMonth : 'Пред.',
        nextMonth     : 'След.',
        months        : ['Январь','Февраль','Март','Апрель','Май','Июнь',
                         'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        weekdays      : ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
        weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
    },
    firstDay: 1  // неделя начинается с понедельника
});
  • months — массив полных названий месяцев
  • weekdays — массив полных названий дней недели
  • weekdaysShort — массив сокращённых названий дней
  • firstDay — индекс первого дня недели (0 — воскресенье, 1 — понедельник)

Работа с динамическими языками

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

const locales = {
    ru: {
        previousMonth : 'Пред.',
        nextMonth     : 'След.',
        months        : ['Январь','Февраль','Март','Апрель','Май','Июнь',
                         'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        weekdays      : ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
        weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
    },
    en: {
        previousMonth : 'Prev',
        nextMonth     : 'Next',
        months        : ['January','February','March','April','May','June',
                         'July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    }
};

const currentLocale = 'ru';

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    i18n: locales[currentLocale],
    firstDay: 1
});

Настройка формата при интеграции с Moment.js

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

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'LL',  // формат Moment.js, автоматически локализуется
    toString(date, format) {
        return moment(date).locale('ru').format(format);
    },
    parse(dateString, format) {
        return moment(dateString, format, 'ru').toDate();
    }
});
  • Метод toString преобразует объект Date в строку с учётом локали
  • Метод parse разбирает введённую пользователем строку в объект Date

Учет локальных стандартов

Важно учитывать региональные стандарты записи дат:

  • В России обычно используется DD.MM.YYYY
  • В США — MM/DD/YYYY
  • В Японии — YYYY/MM/DD

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

Итоговые рекомендации по локализации

  • Всегда задавать формат даты через format
  • Использовать i18n для перевода всех подписи месяцев и дней недели
  • Настраивать firstDay согласно локальным стандартам
  • При сложных требованиях интегрировать Moment.js или другой форматтер для локализации и парсинга

Локализация Pikaday обеспечивает полное соответствие пользовательскому языку и региональным стандартам, повышая удобство и точность работы с датами.

Оглавление