Параметр numberOfMonths

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

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

Базовая конфигурация

Параметр задаётся числом:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    numberOfMonths: 1
});

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

Увеличение значения:

numberOfMonths: 2

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

Многомесячный режим отображения

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

Линейное отображение

Чаще всего используется горизонтальная компоновка:

numberOfMonths: 3

Результат:

  • текущий месяц
  • следующий месяц
  • следующий за ним месяц

Все три панели синхронизированы по навигации.

Влияние на навигацию

Навигационные стрелки (вперёд/назад) при увеличенном numberOfMonths сдвигают весь набор месяцев одновременно. Это означает:

  • при numberOfMonths: 3 переход вперёд сдвигает сразу три месяца
  • пользователь не «листает» каждый месяц отдельно
  • сохраняется когерентность временного окна

Такое поведение важно для предотвращения рассинхронизации отображаемых периодов.

Использование в диапазонах дат

При работе с диапазонами дат (range selection) многомесячный режим существенно повышает удобство:

  • выбор начала и конца периода становится визуально прозрачнее
  • уменьшается необходимость переключения месяцев
  • упрощается сравнение дат на разных участках календаря

Особенно часто используется конфигурация:

numberOfMonths: 2

в системах бронирования, аналитики и планирования.

Ограничения и влияние на layout

Увеличение numberOfMonths напрямую влияет на ширину календаря. Это может приводить к следующим эффектам:

1. Переполнение контейнера

Если контейнер не адаптивный, календарь может выходить за пределы блока:

  • фиксированная ширина input-обёртки становится узким местом
  • требуется управление CSS

2. Снижение читаемости

При значениях 4 и выше:

  • уменьшается размер каждого месяца
  • возрастает плотность интерфейса
  • ухудшается восприятие на небольших экранах

3. Вертикальная перестройка

В некоторых реализациях CSS (или кастомных темах) месяцы могут переноситься на новую строку, образуя сетку:

  • 2 × 2 при numberOfMonths: 4
  • 3 × 2 при numberOfMonths: 6

Взаимодействие с responsive-логикой

Сам по себе numberOfMonths не содержит встроенной адаптивности. Однако часто используется динамическое изменение значения в зависимости от ширины экрана:

var months = window.innerWidth < 600 ? 1 : 2;

var picker = new Pikaday({
    field: input,
    numberOfMonths: months
});

Такой подход позволяет:

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

Сочетание с другими параметрами

showDaysInNextAndPreviousMonths

При включении отображения дней соседних месяцев (showDaysInNextAndPreviousMonths) многомесячный режим становится более визуально непрерывным:

  • границы месяцев визуально «размываются»
  • повышается восприятие единого календарного полотна
  • упрощается сравнение дат между месяцами

firstDay

При изменении первого дня недели (например, понедельник вместо воскресенья) все отображаемые месяцы синхронно перестраиваются, что особенно заметно при numberOfMonths > 1, так как визуальная разница между колонками становится более выраженной.

Производительность и рендеринг

Хотя календарь не является тяжёлым компонентом, увеличение numberOfMonths влияет на:

  • количество DOM-узлов
  • число отрисовываемых ячеек
  • время первичной инициализации

Каждый месяц включает:

  • заголовок
  • сетку недель
  • элементы дней (обычно 28–42 ячейки)

Таким образом:

  • 1 месяц ≈ 42 ячейки
  • 3 месяца ≈ 126 ячеек
  • 6 месяцев ≈ 252 ячейки

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

Практика выбора значения

Типовые значения:

  • 1 — формы ввода одиночной даты, минималистичные интерфейсы
  • 2 — диапазоны дат, бронирование, планирование
  • 3 — аналитические панели, календарные обзоры
  • 4+ — специализированные интерфейсы планирования (редко, обычно с кастомной версткой)

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

Особенности поведения при переключении месяцев

При изменении numberOfMonths динамически (после инициализации) поведение зависит от реализации обёртки:

  • в базовой конфигурации требуется пересоздание календаря
  • внутреннее состояние (выбранная дата) сохраняется только при корректной переинициализации
  • DOM полностью перестраивается

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

Влияние на UX при выборе дат

Многомесячное отображение меняет модель взаимодействия пользователя:

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

Однако при слишком большом числе месяцев:

  • внимание рассеивается между колонками
  • ухудшается фокус на текущем выборе
  • возрастает когнитивная нагрузка

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

Оглавление