Параметр isRTL

Работа параметра isRTL в Pikaday определяет направление интерфейса календаря и отвечает за поддержку языков с письмом справа налево. Значение параметра влияет на компоновку всех визуальных элементов виджета: заголовка месяца, навигационных кнопок, сетки дней и логики их расположения в DOM-структуре.

isRTL — булевый параметр конфигурации, отвечающий за включение режима Right-To-Left (RTL):

  • true — интерфейс календаря отображается справа налево
  • false — стандартное направление слева направо

По умолчанию значение равно false, что соответствует большинству европейских и азиатских локалей с LTR-письмом.

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

Влияние на интерфейс календаря

При включении isRTL: true происходит системное зеркалирование интерфейса:

1. Панель навигации месяцев

  • Кнопка «следующий месяц» перемещается влево
  • Кнопка «предыдущий месяц» перемещается вправо
  • Заголовок месяца выравнивается по правому краю (в зависимости от CSS)

2. Сетка календаря

  • Дни недели отображаются в обратном порядке
  • Первая колонка становится правой
  • Визуальная логика движения недели разворачивается

3. Поведение стрелочной навигации

  • Клавиши влево/вправо могут менять направление логики переключения дат
  • Поведение зависит от связки с браузерной локалью и обработчиками событий

Пример базовой конфигурации

const picker = new Pikaday({
    field: document.getElementById('date'),
    isRTL: true
});

В этом случае календарь полностью переключается в RTL-режим без дополнительных настроек локализации.

Взаимодействие с локалями

isRTL часто используется совместно с параметром i18n или локализацией через Moment.js (в старых конфигурациях Pikaday).

Пример:

const picker = new Pikaday({
    field: document.getElementById('date'),
    isRTL: true,
    i18n: {
        previousMonth : 'الشهر السابق',
        nextMonth     : 'الشهر القادم',
        months        : ['يناير','فبراير','مارس','أبريل','مايو','يونيو',
                         'يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'],
        weekdays      : ['الأحد','الإثنين','الثلاثاء','الأربعاء',
                         'الخميس','الجمعة','السبت'],
        weekdaysShort : ['أحد','إثن','ثلا','أرب','خمي','جمع','سبت']
    }
});

В таком сочетании isRTL отвечает только за геометрию интерфейса, а i18n — за языковое наполнение.

CSS-аспекты RTL-режима

Сам по себе isRTL не переписывает стили глобально, но добавляет классы и поведенческие особенности, на которые должен опираться CSS:

  • изменение направления flex-контейнеров (логически)
  • перестановка элементов через direction: rtl (в зависимости от реализации интеграции)
  • необходимость корректной поддержки text-align: right

Пример кастомизации:

.pika-single.is-rtl {
    direction: rtl;
}

.pika-single.is-rtl .pika-prev {
    float: right;
}

.pika-single.is-rtl .pika-next {
    float: left;
}

В реальных проектах часто требуется дополнительная корректировка, так как стандартные стили Pikaday ориентированы на LTR.

Поведение с bound: true

При использовании привязанного календаря (bound: true, значение по умолчанию), RTL-режим может влиять на позиционирование всплывающего окна:

  • смещение попапа относительно input может зеркалироваться
  • расчёт left/right координат зависит от контейнера
  • возможны ситуации, когда календарь выходит за пределы экрана справа/слева

Типичный фикс — переопределение CSS позиционирования:

.pika-single.is-rtl {
    right: 0;
    left: auto;
}

Взаимодействие с навигацией и keyboard events

RTL-режим может затрагивать логику клавиатурной навигации:

  • стрелка влево может интерпретироваться как переход к следующей дате (визуально «вперёд»)
  • стрелка вправо — к предыдущей
  • поведение зависит от версии и реализации обработчиков внутри библиотеки

В кастомных сборках часто требуется явная нормализация:

onDraw: function(date) {
    if (this.isRTL) {
        // кастомная логика отображения
    }
}

Сочетание с firstDay

При isRTL: true параметр firstDay (день начала недели) не меняет направление отображения колонок, но влияет на:

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

Например:

  • firstDay: 0 (воскресенье) в RTL будет отображаться справа
  • firstDay: 1 (понедельник) сдвигает сетку аналогично, но в зеркальной системе координат

Частые проблемы при использовании isRTL

1. Несовпадение CSS и логики Интерфейс может быть зеркальным, но стили остаются LTR, что приводит к «ломаному» UI.

2. Попап выходит за экран Особенно в bound: true режиме при абсолютном позиционировании.

3. Конфликты с глобальным direction: rtl Если родительский контейнер уже имеет RTL, двойное применение может приводить к инверсии поведения.

4. Неполная локализация isRTL не переводит интерфейс, поэтому без i18n календарь остаётся визуально RTL, но текст LTR.

Рекомендации по интеграции

  • всегда синхронизировать isRTL с языковой локалью интерфейса
  • проверять поведение popover в responsive-режимах
  • при сложных интерфейсах использовать CSS direction на уровне контейнера
  • тестировать навигацию клавиатурой отдельно от мыши
  • избегать смешивания RTL и LTR-элементов внутри одного календаря

Поведение в многоязычных интерфейсах

В приложениях, где язык может динамически меняться, isRTL часто пересоздаёт экземпляр календаря, а не переключается на лету:

  • изменение направления требует пересоздания DOM
  • внутреннее состояние календаря не всегда адаптируется динамически
  • возможны артефакты при переключении языка без re-init

Особенности рендеринга заголовка и дней

В RTL-режиме:

  • заголовок месяца визуально смещается вправо
  • кнопки навигации меняются местами
  • сетка дней разворачивается по горизонтали
  • логика «начала недели» сохраняется, но отображается зеркально

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

Оглавление