Программное управление календарем

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

const picker = new Pikaday({
    field: document.querySelector('#date-input')
});

С этого момента управление календарём выполняется через picker. Все ключевые операции — установка даты, переключение месяца, открытие и закрытие интерфейса — выполняются через его методы, а не через DOM напрямую.

Установка и изменение выбранной даты

setDate

Метод setDate является основным способом программного выбора даты:

picker.setDate(new Date(2026, 5, 10));

Поведение метода зависит от второго параметра:

picker.setDate(new Date(), true);
  • true — триггерит событие onSelect
  • false или отсутствие параметра — изменение происходит без событий

Использование setDate важно в сценариях, где дата синхронизируется с внешним состоянием приложения: формами, состоянием маршрута или ответом API.

setStartRange и setEndRange

В режиме диапазона дат (range selection) управление осуществляется через установку границ:

picker.setStartRange(new Date(2026, 0, 1));
picker.setEndRange(new Date(2026, 0, 15));

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

Получение текущего состояния

getDate

Метод getDate возвращает текущую выбранную дату:

const selected = picker.getDate();

Возвращаемое значение — объект Date или null, если дата не выбрана.

В сценариях с валидацией формы этот метод используется для синхронизации состояния:

if (!picker.getDate()) {
    console.log('Дата не выбрана');
}

toString

Метод toString преобразует выбранную дату в строку:

picker.toString('YYYY-MM-DD');

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

Пример использования для интеграции с API:

const payload = {
    date: picker.toString('YYYY-MM-DD')
};

Программная навигация по календарю

gotoDate

Метод gotoDate изменяет отображаемый месяц и год без изменения выбранной даты:

picker.gotoDate(new Date(2027, 11, 1));

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

gotoToday

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

picker.gotoToday();

Этот метод полезен при реализации кнопки «Сегодня», которая не влияет на выбранную дату, но меняет видимую область календаря.

Управление видимостью календаря

show

Открытие календаря программно:

picker.show();

Метод инициирует полный цикл отрисовки интерфейса, включая вычисление позиции относительно поля ввода.

hide

Закрытие календаря:

picker.hide();

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

isVisible

Проверка состояния отображения:

if (picker.isVisible()) {
    console.log('Календарь открыт');
}

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

Управление ограничениями дат

setMinDate и setMaxDate

Ограничение диапазона выбора может изменяться динамически:

picker.setMinDate(new Date(2026, 0, 1));
picker.setMaxDate(new Date(2026, 11, 31));

Такие методы часто используются при зависимых датах: например, дата окончания не может быть раньше даты начала.

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

Программное управление состоянием через события

onSelect

Событие выбора даты позволяет реагировать на изменения:

const picker = new Pikaday({
    field: document.querySelector('#date-input'),
    onSelect: function(date) {
        console.log('Выбрана дата:', date);
    }
});

При использовании setDate с флагом true это событие также срабатывает.

onOpen и onClose

События открытия и закрытия календаря позволяют синхронизировать внешний интерфейс:

const picker = new Pikaday({
    onOpen: function() {
        console.log('Календарь открыт');
    },
    onClose: function() {
        console.log('Календарь закрыт');
    }
});

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

Программное обновление без пересоздания экземпляра

Синхронизация внешнего состояния

В приложениях с реактивной архитектурой календарь часто обновляется без пересоздания экземпляра:

function updateDateFromStore(date) {
    picker.setDate(date, false);
}

Это позволяет избежать лишних перерисовок и сохраняет текущее состояние UI.

Переключение конфигурации

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

picker.setMinDate(minDate);
picker.setMaxDate(maxDate);
picker.gotoDate(minDate);

Такая последовательность гарантирует корректное отображение диапазона.

Управление позиционированием и перерисовкой

adjustPosition

При изменении размеров окна или контейнера может потребоваться корректировка позиции:

picker.adjustPosition();

Метод пересчитывает координаты календаря относительно input-элемента. Встраивается в обработчики resize:

window.addEventListener('resize', () => {
    picker.adjustPosition();
});

Уничтожение экземпляра и очистка ресурсов

destroy

Метод destroy полностью удаляет календарь и освобождает ресурсы:

picker.destroy();

После вызова экземпляр становится невалидным. DOM-обработчики снимаются, а созданные элементы удаляются.

В динамических интерфейсах это важно при смене страниц или компонентов:

if (picker) {
    picker.destroy();
    picker = null;
}

Управление через внешние элементы интерфейса

Программное управление часто комбинируется с кастомными кнопками:

document.querySelector('#open-btn').addEventListener('click', () => {
    picker.show();
});

document.querySelector('#today-btn').addEventListener('click', () => {
    picker.setDate(new Date());
});

Такой подход превращает календарь Pikaday в управляемый компонент, полностью контролируемый логикой приложения.

Сценарии комплексного управления

Связанные поля дат

При работе с диапазонами часто используется связка двух экземпляров:

const startPicker = new Pikaday({
    field: document.querySelector('#start'),
    onSelect: function(date) {
        endPicker.setMinDate(date);
    }
});

const endPicker = new Pikaday({
    field: document.querySelector('#end')
});

Такая схема обеспечивает логическую целостность интервалов.

Программная синхронизация с сервером

При получении данных извне календарь обновляется без участия пользователя:

fetch('/api/date')
    .then(res => res.json())
    .then(data => {
        picker.setDate(new Date(data.date), false);
        picker.gotoDate(new Date(data.date));
    });

Здесь разделяется логика:

  • setDate — фиксирует значение
  • gotoDate — обновляет отображение

Контроль состояния в сложных интерфейсах

В SPA-приложениях календарь часто становится частью глобального состояния. Программные методы позволяют полностью контролировать его поведение:

function resetCalendar() {
    picker.setDate(null);
    picker.gotoToday();
    picker.hide();
}

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

Оглавление