Настройка формата previousMonth и nextMonth

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

Элементы управления месяцами в Pikaday реализованы в виде стрелок навигации. Каждая стрелка имеет текстовую подпись, которая используется:

  • как title (всплывающая подсказка при наведении);
  • как aria-label (для экранных читалок);
  • как fallback-текст в некоторых конфигурациях без CSS-иконок.

Параметры:

  • previousMonth — текст для кнопки перехода к предыдущему месяцу;
  • nextMonth — текст для кнопки перехода к следующему месяцу.

По умолчанию значения заданы на английском языке:

  • "Previous Month"
  • "Next Month"

Базовая настройка через i18n

Настройка выполняется через объект i18n при инициализации календаря.

new Pikaday({
    field: document.getElementById('date'),
    i18n: {
        previousMonth: 'Предыдущий месяц',
        nextMonth: 'Следующий месяц'
    }
});

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

Влияние на доступность интерфейса

Корректная настройка previousMonth и nextMonth напрямую влияет на доступность:

  • экранные читалки используют эти строки для озвучивания кнопок;
  • пользователи с ограниченными возможностями получают семантическое описание действий;
  • при отсутствии текста интерфейс теряет смысловую структуру.

Пример улучшенной локализации с учётом доступности:

new Pikaday({
    field: document.querySelector('#date'),
    i18n: {
        previousMonth: 'Перейти к предыдущему месяцу',
        nextMonth: 'Перейти к следующему месяцу'
    }
});

Более длинные формулировки повышают ясность действия, особенно в assistive-технологиях.

Интеграция с многоязычными интерфейсами

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

Пример структуры локализаций:

const translations = {
    ru: {
        previousMonth: 'Предыдущий месяц',
        nextMonth: 'Следующий месяц'
    },
    en: {
        previousMonth: 'Previous Month',
        nextMonth: 'Next Month'
    },
    kz: {
        previousMonth: 'Алдыңғы ай',
        nextMonth: 'Келесі ай'
    }
};

Инициализация с выбранной локалью:

const lang = 'ru';

new Pikaday({
    field: document.getElementById('date'),
    i18n: translations[lang]
});

Связь с кастомизацией UI-иконок

Хотя previousMonth и nextMonth не управляют визуальными иконками напрямую, они часто используются вместе с кастомной стилизацией стрелок.

Пример замены стандартных стрелок:

.pika-prev::before {
    content: '‹';
}

.pika-next::before {
    content: '›';
}

В этом случае текстовые значения i18n остаются важными для:

  • tooltip-подсказок;
  • ARIA-атрибутов;
  • SEO-индексации в некоторых SSR-рендерах.

Использование с динамической сменой месяца

При переключении месяцев Pikaday обновляет DOM и повторно использует значения i18n. Это означает, что изменения в previousMonth и nextMonth применяются ко всем последующим рендерам календаря.

Поведение:

  • клик по стрелке «previous» → обновление месяца назад;
  • клик по стрелке «next» → обновление месяца вперёд;
  • при каждом рендере используются текущие строки локализации.

Частичная кастомизация только навигации

Иногда требуется изменить только навигационные подписи, не затрагивая остальную локализацию (например, названия месяцев и дней недели). Это допустимый сценарий.

new Pikaday({
    field: document.getElementById('date'),
    i18n: {
        previousMonth: '← Назад',
        nextMonth: 'Вперёд'
    },
    months: [
        'January','February','March','April','May','June',
        'July','August','September','October','November','December'
    ]
});

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

Поведение при отсутствии i18n-конфигурации

Если i18n не задан:

  • используются стандартные английские строки;
  • поведение навигации остаётся неизменным;
  • интерфейс сохраняет функциональность, но теряет локализацию.

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

Особенности переопределения после инициализации

Pikaday не предоставляет прямого API для изменения i18n после создания экземпляра. Поэтому обновление previousMonth и nextMonth обычно требует:

  • пересоздания экземпляра календаря;
  • или полной реинициализации компонента при смене языка.

Пример пересоздания:

let picker = new Pikaday({
    field: document.getElementById('date'),
    i18n: translations.ru
});

function switchLanguage(lang) {
    picker.destroy();
    picker = new Pikaday({
        field: document.getElementById('date'),
        i18n: translations[lang]
    });
}

Практика унификации текстов навигации

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

  • короткие формы («Prev / Next»);
  • направленные символы («← / →»);
  • или глагольные формы («Назад / Вперёд»).

Выбор влияет на плотность интерфейса и восприятие управления календарём, особенно в компактных UI-компонентах.

Оглавление