Параметр yearRange

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

Основная задача параметра — контроль диапазона отображаемых лет в селекторе года, который появляется в заголовке календаря при использовании режима с переключением года.

Назначение и поведение

yearRange определяет:

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

При этом важно понимать, что параметр влияет только на UI-выбор года, а не на фактическую валидацию дат. Ограничение выбора дат в целом задаётся через minDate и maxDate.

Форматы задания yearRange

В зависимости от конфигурации Pikaday параметр может принимать несколько форм.

1. Числовой формат (смещение от текущего года)

yearRange: 10

В этом случае диапазон формируется автоматически:

  • текущий год ± 10 лет
  • если текущий год 2026 → диапазон 2016–2036

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

2. Строковый диапазон

yearRange: "1900:2030"

Или вариант с относительными значениями:

yearRange: "-10:+10"

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

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

Относительный формат интерпретируется относительно текущего года.

3. Массив значений

yearRange: [1990, 2025]

Наиболее строгий и предсказуемый вариант:

  • первый элемент — минимальный год
  • второй элемент — максимальный год

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

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

Внутри компонента Pikaday yearRange влияет на следующие элементы UI:

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

При этом:

  • список месяцев не затрагивается
  • дни месяца не фильтруются напрямую
  • выбранная дата может оставаться вне диапазона, если не задан minDate/maxDate

Взаимодействие с другими параметрами

minDate и maxDate

minDate: new Date(2000, 0, 1),
maxDate: new Date(2030, 11, 31),
yearRange: "1990:2040"

Логика взаимодействия:

  • yearRange управляет только UI-диапазоном лет
  • minDate и maxDate реально блокируют выбор дат
  • при конфликте приоритет у minDate/maxDate

defaultDate

Если defaultDate находится вне диапазона yearRange, календарь может:

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

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

Ограничение возраста пользователя

yearRange: [1920, 2008]

Используется в формах, где требуется ограничение по возрасту (например, регистрация с минимальным возрастом 18+).

Финансовые и отчётные системы

yearRange: "2000:2035"

Применяется в интерфейсах:

  • выбора финансового периода
  • отчётов
  • архивных данных

Динамический диапазон вокруг текущего года

yearRange: 5

Подходит для:

  • событийных календарей
  • планирования
  • бронирований

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

Внутри Pikaday значение yearRange преобразуется в:

  • минимальный год (minYear)
  • максимальный год (maxYear)

Далее эти значения используются для построения списка опций:

  • генерация массива лет
  • рендер <select> элемента
  • проверка доступности навигации

Типичные ошибки при использовании

1. Несоответствие minDate/maxDate

yearRange: "1990:2000",
minDate: new Date(2010, 0, 1)

Результат:

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

2. Слишком широкий диапазон

yearRange: "1000:3000"

Последствия:

  • перегруженный dropdown
  • ухудшение UX на слабых устройствах

3. Относительные значения без понимания контекста

yearRange: "-50:+50"

Проблема:

  • диапазон может неожиданно измениться со временем

Рекомендации по проектированию диапазона

При использовании Pikaday важно учитывать:

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

Оптимальные диапазоны:

  • узкие (±10–20 лет) для интерфейсов ввода
  • фиксированные (20–50 лет) для форм с ограничениями
  • динамические для общих календарей без строгих правил

Поведение при отсутствии параметра

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

  • используется диапазон по умолчанию
  • чаще всего это ±10 лет от текущего года
  • поведение может незначительно отличаться в разных версиях

Итоговая модель работы параметра

Логика можно описать так:

  1. Получение yearRange
  2. Преобразование в minYear и maxYear
  3. Генерация списка лет
  4. Рендер UI
  5. Сопоставление с minDate/maxDate при выборе

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

Оглавление