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

Работа с Pikaday всегда начинается с привязки календаря к DOM-элементу ввода. Именно этот шаг определяет, как пользователь будет взаимодействовать с датой: через прямой ввод, через выбор из всплывающего календаря или в гибридном режиме.

Основной способ связать календарь с input-полем — передать элемент в параметр field. Этот параметр принимает ссылку на HTMLInputElement, который становится точкой управления датой.

const input = document.querySelector('#date-input');

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

После выполнения этого кода календарь автоматически «слушает» взаимодействие с полем ввода: клик по input открывает всплывающий календарь, а выбор даты заполняет значение поля.

Ключевой момент: field является обязательной точкой привязки для стандартного поведения.

Связь выбора даты и значения input

После выбора даты Pikaday автоматически записывает значение в input. Формат по умолчанию — ISO-подобный (YYYY-MM-DD), но он может быть изменён через toString или format (в зависимости от конфигурации и расширений).

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

Важно понимать: input и календарь синхронизируются в одном направлении — выбор в календаре обновляет поле.

Обратная синхронизация (ручной ввод)

При привязке через field библиотека также отслеживает изменения значения input, если формат соответствует ожидаемому.

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

Если пользователь вводит дату вручную, календарь пытается распознать её и установить внутреннее состояние.

Особенность поведения:

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

Использование onSelect для управления input

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

const input = document.querySelector('#date-input');

const picker = new Pikaday({
    field: input,
    onSelect: function(date) {
        const formatted = this.toString(date);
        input.value = formatted;
    }
});

Здесь можно:

  • изменить формат вывода
  • добавить локализацию
  • модифицировать дату перед записью

Привязка к уже существующему значению input

Если input уже содержит дату до инициализации календаря, Pikaday может использовать её как начальное значение при корректной настройке.

const input = document.querySelector('#date-input');

const picker = new Pikaday({
    field: input,
    defaultDate: new Date(input.value),
    setDefaultDate: true
});

Параметры:

  • defaultDate — начальная дата календаря
  • setDefaultDate — установка этой даты в поле при инициализации

Работа с пустым input

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

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

Поведение:

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

Доступ к DOM-элементу через getField

После инициализации можно получить доступ к привязанному input через API экземпляра.

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

console.log(picker.getField());

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

Динамическая смена привязанного input

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

picker.destroy();

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

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

Работа с readonly input

Часто input делают readonly, чтобы запретить ручной ввод и оставить только выбор через календарь.

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

Такой подход:

  • исключает ошибки формата
  • упрощает валидацию
  • делает поведение предсказуемым

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

Pikaday по умолчанию реагирует на события focus/blur у input. При фокусе календарь открывается, при потере фокуса может закрываться (в зависимости от конфигурации и клика внутри календаря).

Это поведение важно учитывать при:

  • формах с несколькими полями
  • модальных окнах
  • кастомных UI-компонентах

Несколько input-элементов

Каждый input требует отдельного экземпляра календаря:

document.querySelectorAll('.date-input').forEach(el => {
    new Pikaday({
        field: el
    });
});

Общая логика:

  • один input → один экземпляр
  • независимое состояние календарей
  • отсутствие глобальной синхронизации

Влияние удаления DOM-элемента

Если input удаляется из DOM, календарь не уничтожается автоматически. Это может привести к утечкам памяти.

Корректный подход:

picker.destroy();
input.remove();

Метод destroy():

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

Итоговая модель привязки

Привязка input к Pikaday строится вокруг нескольких ключевых принципов:

  • field задаёт основную точку взаимодействия
  • выбор даты всегда синхронизирует значение input
  • ручной ввод может быть обработан, но требует формата
  • каждый input управляется отдельным экземпляром
  • жизненный цикл должен завершаться через destroy() при удалении DOM

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

Оглавление