Создание экземпляра Pikaday

Экземпляр календаря создаётся через конструктор Pikaday, который принимает объект настроек. Основная идея заключается в привязке календаря к DOM-элементу, чаще всего к полю ввода.

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

Ключевой параметр field определяет HTML-элемент, с которым будет связан календарь. В момент фокуса на поле или при взаимодействии с ним отображается календарь.

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

Привязка к input-элементу

Наиболее распространённый сценарий — подключение календаря к <input>:

<input type="text" id="datepicker">
var picker = new Pikaday({
    field: document.getElementById('datepicker')
});

После выбора даты значение автоматически записывается в поле ввода в формате ISO (YYYY-MM-DD) или в пользовательском формате, если он задан.

Форматирование отображаемой даты

Для управления форматом используется параметр format:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD.MM.YYYY'
});

Форматирование работает только при наличии соответствующего механизма парсинга. В зависимости от конфигурации Pikaday может использовать внутренний парсер или интеграцию с Moment.js.

Установка начальной даты

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

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    defaultDate: new Date(2025, 0, 15),
    setDefaultDate: true
});
  • defaultDate задаёт начальную дату
  • setDefaultDate определяет, будет ли она сразу отображена в поле

Если setDefaultDate не установлен, календарь откроется с указанной датой, но поле ввода останется пустым.

Явное управление датой после создания экземпляра

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

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

Получение текущего значения:

var date = picker.getDate();

Очистка значения:

picker.setDate(null);

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

Ограничение диапазона дат

Для контроля доступных значений используются параметры minDate и maxDate:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2026, 11, 31)
});

Ограничения применяются как к выбору через интерфейс, так и к программной установке значений.

Управление первым днём недели

Параметр firstDay задаёт начало недели:

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

Значения:

  • 0 — воскресенье
  • 1 — понедельник

Это влияет на отображение сетки календаря.

Создание экземпляра без привязки к input

Pikaday может работать автономно, без поля ввода:

var picker = new Pikaday({
    onSelect: function(date) {
        console.log(date);
    }
});

В таком режиме календарь может использоваться как всплывающий компонент или встроенный виджет, а выбранная дата обрабатывается через callback onSelect.

Обработка выбора даты

Событие выбора реализуется через onSelect:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: function(date) {
        console.log('Выбрана дата:', date);
    }
});

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

Управление отображением календаря

Экземпляр предоставляет методы управления видимостью:

picker.show();
picker.hide();

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

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

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

picker.draw();

Метод пересчитывает и перерисовывает текущий месяц с учётом новых ограничений или состояния.

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

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

picker.destroy();

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

Инициализация нескольких экземпляров

Pikaday допускает создание нескольких независимых календарей на одной странице:

var startPicker = new Pikaday({
    field: document.getElementById('start')
});

var endPicker = new Pikaday({
    field: document.getElementById('end')
});

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

Связь экземпляра с внешними данными

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

var state = {
    date: null
};

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: function(date) {
        state.date = date;
    }
});

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

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

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

picker.destroy();

picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'DD.MM.YYYY'
});

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

Работа с начальным состоянием поля

Если поле уже содержит дату, Pikaday может её интерпретировать:

<input type="text" id="datepicker" value="2026-06-01">
var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'YYYY-MM-DD'
});

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

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

Если параметр field не указан, экземпляр создаётся как независимый календарь:

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

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

Оглавление