Автономное использование без input

В стандартной конфигурации Pikaday привязывается к HTML-полю ввода и автоматически синхронизирует выбранную дату с его значением. Однако библиотека поддерживает режим автономного использования, при котором календарь существует как самостоятельный UI-компонент, встроенный в произвольный контейнер и управляемый программно без участия <input>.

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

Отключение привязки к input

Ключевой параметр автономного режима — bound: false. Он полностью отключает стандартное поведение, при котором календарь прикрепляется к input-элементу и управляет его значением.

const picker = new Pikaday({
    bound: false
});

После установки bound: false календарь больше не ищет input и не пытается синхронизировать значение с DOM-элементом формы.

Размещение календаря в контейнере

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

<div id="calendar-container"></div>
const container = document.getElementById('calendar-container');

const picker = new Pikaday({
    bound: false,
    container: container
});

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

Поведение рендеринга в автономном режиме

При использовании container библиотека перестаёт управлять позиционированием всплывающего окна. Вместо этого календарь:

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

Это превращает компонент в статический календарный виджет.

Управление датой без input

Выбор даты осуществляется через внутренний API экземпляра. Основной механизм — событие onSelect, которое вызывается при клике по дате.

const picker = new Pikaday({
    bound: false,
    container: document.getElementById('calendar-container'),
    onSelect: function(date) {
        console.log('Выбрана дата:', date);
    }
});

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

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

Автономный режим предполагает активное использование методов экземпляра.

Установка даты

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

Метод изменяет выбранное значение и обновляет отображение календаря.

Получение текущей даты

const selected = picker.getDate();

Если дата не выбрана, возвращается null.

Сброс значения

picker.setDate(null);

Сброс состояния приводит календарь в исходное положение без выделенной даты.

Отображение и скрытие в автономном сценарии

Хотя bound: false делает календарь встроенным, управление видимостью контейнера остаётся на стороне приложения.

document.getElementById('calendar-container').style.display = 'none';

При необходимости календарь может быть динамически включён:

document.getElementById('calendar-container').style.display = 'block';

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

Инициализация с предустановленной датой

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

const picker = new Pikaday({
    bound: false,
    container: document.getElementById('calendar-container'),
    defaultDate: new Date(2026, 5, 1),
    setDefaultDate: true
});

Параметр setDefaultDate заставляет календарь сразу активировать указанную дату как выбранную.

Использование форматов и внешнего отображения

Так как input отсутствует, форматирование даты выполняется вручную через onSelect.

function formatDate(date) {
    return date.toISOString().split('T')[0];
}

const picker = new Pikaday({
    bound: false,
    container: document.getElementById('calendar-container'),
    onSelect: function(date) {
        document.getElementById('output').textContent = formatDate(date);
    }
});

Такой подход отделяет UI календаря от логики отображения данных.

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

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

const first = new Pikaday({
    bound: false,
    container: document.getElementById('calendar-1')
});

const second = new Pikaday({
    bound: false,
    container: document.getElementById('calendar-2')
});

Каждый экземпляр имеет собственное состояние, навигацию и обработчики событий.

Интеграция с пользовательскими интерфейсами

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

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

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

Управление минимальными и максимальными датами

Ограничения диапазона работают так же, как и в стандартном режиме.

const picker = new Pikaday({
    bound: false,
    container: document.getElementById('calendar'),
    minDate: new Date(2026, 0, 1),
    maxDate: new Date(2026, 11, 31)
});

Это особенно важно для интерфейсов, где выбор даты должен соответствовать бизнес-логике.

Обновление экземпляра и повторная инициализация

Автономный режим требует аккуратного управления жизненным циклом.

Удаление экземпляра:

picker.destroy();

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

Поведение при изменении DOM-контейнера

Если контейнер удаляется из DOM, календарь перестаёт отображаться, но экземпляр может оставаться в памяти. Это требует ручного контроля в приложениях с динамическими интерфейсами (SPA).

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

Стилизация автономного календаря

Встроенный календарь использует те же CSS-классы, что и всплывающая версия. Основные точки кастомизации:

  • .pika-single
  • .pika-lendar
  • .pika-button
  • .pika-day
.pika-single {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

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

Взаимодействие через события

Ключевое событие — onSelect, но также доступны:

  • изменение месяца;
  • навигация по годам;
  • изменение состояния выделения.
const picker = new Pikaday({
    bound: false,
    container: document.getElementById('calendar'),
    onSelect: function(date) {
        console.log(date);
    },
    onOpen: function() {
        console.log('календарь активирован');
    },
    onDraw: function() {
        console.log('перерисовка календаря');
    }
});

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

Архитектурные особенности автономного режима

Автономное использование изменяет роль календаря в приложении:

  • отсутствует зависимость от формы ввода;
  • управление полностью переходит в JavaScript-логику;
  • DOM используется как контейнер визуального компонента;
  • взаимодействие строится через API и события.

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

Оглавление