Метод prevMonth

Метод prevMonth() в библиотеке Pikaday предназначен для перехода календаря на предыдущий месяц относительно текущего отображаемого периода. Он изменяет состояние календаря, обновляет интерфейс и отображает даты месяца, который предшествует открытому в данный момент.

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

Сигнатура метода выглядит следующим образом:

picker.prevMonth();

Метод не принимает аргументов и не возвращает значения.

Принцип работы

Каждый экземпляр Pikaday хранит информацию о текущем отображаемом месяце и годе. При вызове prevMonth() происходит:

  1. Определение текущего отображаемого месяца.
  2. Вычисление предыдущего месяца.
  3. При необходимости изменение года.
  4. Перерисовка календаря.
  5. Отображение нового набора дней.

Например, если календарь показывает июнь 2025 года:

picker.prevMonth();

После вызова будет отображён май 2025 года.

Если открыт январь:

picker.prevMonth();

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

Простое использование

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

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

picker.prevMonth();

После выполнения команды календарь сместится на один месяц назад.

Связь с отображаемым месяцем

Важно понимать, что метод работает с отображаемым месяцем, а не с выбранной датой.

Предположим, выбрана дата:

15.03.2025

Однако пользователь уже перешёл в июнь:

Июнь 2025

Вызов:

picker.prevMonth();

переключит календарь на май 2025 года, а не на февраль относительно выбранной даты.

Таким образом, метод ориентируется исключительно на текущее состояние интерфейса.

Использование с пользовательскими кнопками

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

HTML:

<input id="date">

<button id="prev">
    Предыдущий месяц
</button>

Jav * aScript:

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

document
    .getElementById('prev')
    .addEventListener('click', () => {
        picker.prevMonth();
    });

При нажатии кнопки календарь будет перемещаться назад на один месяц.

Последовательные переходы

Метод можно вызывать несколько раз подряд.

picker.prevMonth();
picker.prevMonth();
picker.prevMonth();

Если первоначально отображался август:

Август → Июль → Июнь → Май

В результате календарь покажет май текущего года.

Переход через границу года

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

Исходное состояние:

Январь 2025

Вызов:

picker.prevMonth();

Результат:

Декабрь 2024

Разработчику не требуется самостоятельно отслеживать уменьшение года.

Работа в циклах

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

Пример перехода на полгода:

for (let i = 0; i < 6; i++) {
    picker.prevMonth();
}

Если отображался июль:

Июль → Январь

После завершения цикла календарь окажется на январе того же года.

Создание кнопки «Назад на год»

Поскольку один год содержит двенадцать месяцев, можно использовать цикл.

function goPreviousYear() {
    for (let i = 0; i < 12; i++) {
        picker.prevMonth();
    }
}

Альтернативный вариант:

Array.from({ length: 12 }).forEach(() => {
    picker.prevMonth();
});

Оба решения приводят к отображению аналогичного месяца предыдущего года.

Использование вместе с методами навигации

Метод тесно связан с другими средствами управления календарём.

Пример переключения между месяцами:

document
    .getElementById('prev')
    .addEventListener('click', () => {
        picker.prevMonth();
    });

document
    .getElementById('next')
    .addEventListener('click', () => {
        picker.nextMonth();
    });

В таком случае создаётся полностью программируемая система навигации.

Совместное использование с gotoMonth

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

picker.gotoMonth(6);
picker.prevMonth();

Если нумерация месяцев начинается с нуля, то:

6 = июль

После вызова prevMonth() будет показан июнь.

Совместное использование с gotoDate

Метод часто применяется после перехода к определённой дате.

picker.gotoDate(
    new Date(2025, 10, 10)
);

picker.prevMonth();

Первоначально откроется ноябрь 2025 года.

Затем будет отображён:

Октябрь 2025

Ограничения minDate

Если для календаря задана минимальная дата:

const picker = new Pikaday({
    field: document.getElementById('date'),
    minDate: new Date(2025, 0, 1)
});

то поведение зависит от внутренней логики Pikaday.

При попытке уйти за допустимые границы календарь может:

  • заблокировать переход;
  • скорректировать отображение;
  • не позволить выбрать недоступные даты.

Поэтому при использовании диапазонов рекомендуется тестировать навигацию отдельно.

Ограничения maxDate

Хотя prevMonth() выполняет движение назад, настройки максимальной даты также влияют на общую работу календаря.

const picker = new Pikaday({
    field: document.getElementById('date'),
    maxDate: new Date(2025, 11, 31)
});

В таких случаях навигация должна рассматриваться совместно с ограничениями выбора дат.

Автоматическая навигация

Метод может использоваться в сценариях автоматического просмотра периодов.

Пример показа предыдущих месяцев каждые две секунды:

setInterval(() => {
    picker.prevMonth();
}, 2000);

Календарь будет последовательно перемещаться назад.

Создание собственного элемента управления

Иногда требуется реализовать нестандартный интерфейс.

<div class="arrow-left">
    ←
</div>
document
    .querySelector('.arrow-left')
    .addEventListener('click', () => {
        picker.prevMonth();
    });

Такой подход позволяет полностью отказаться от стандартных кнопок Pikaday.

Использование в календарях бронирования

Во многих системах бронирования необходимо просматривать предыдущие периоды.

backButton.addEventListener('click', () => {
    picker.prevMonth();
});

Типичные сценарии:

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

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

Метод выполняет минимальный набор операций:

  • изменяет месяц;
  • при необходимости изменяет год;
  • обновляет DOM календаря;
  • отображает новые дни.

Даже многократные вызовы обычно не создают заметной нагрузки:

for (let i = 0; i < 100; i++) {
    picker.prevMonth();
}

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

Типичные ошибки

Ожидание изменения выбранной даты

Некоторые разработчики предполагают, что метод меняет текущее значение поля.

Неверно:

picker.prevMonth();
console.log(
    picker.getDate()
);

prevMonth() не изменяет выбранную дату. Он изменяет только отображение календаря.

Вызов до создания экземпляра

Ошибка:

picker.prevMonth();

если объект ещё не создан.

Правильно:

const picker = new Pikaday({
    field: input
});

picker.prevMonth();

Попытка передать параметры

Метод не принимает аргументов.

Неверно:

picker.prevMonth(2);

или

picker.prevMonth('March');

Корректный вариант:

picker.prevMonth();

Практический пример

<input id="date">

<button id="back">
    Назад
</button>
const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('back')
    .addEventListener('click', () => {
        picker.prevMonth();
    });

В этом примере кнопка вызывает метод prevMonth(), после чего календарь перемещается на один месяц назад относительно текущего отображаемого периода. Такой подход лежит в основе большинства пользовательских механизмов навигации в Pikaday.

Оглавление