Передача данных через события

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

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

Контекст выполнения событий

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

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

new Pikaday({
  onOpen: function () {
    console.log(this.getDate());
    console.log(this.el);
  }
});

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

Передача данных через onSelect

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

Сигнатура:

onSelect: function(date) {}

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

Пример извлечения и преобразования:

new Pikaday({
  onSelect: function(date) {
    const iso = date.toISOString();
    this._o.field.value = iso;
  }
});

Второй канал передачи данных — сам экземпляр через this. Он позволяет синхронизировать состояние интерфейса с внешними компонентами:

onSelect: function(date) {
  const formatted = this.toString(date);
  console.log('Formatted:', formatted);
}

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

Расширение данных через форматирование

Передача данных через события часто дополняется встроенным форматированием. Метод toString используется для преобразования объекта Date в строковое представление согласно заданному формату.

onSelect: function(date) {
  const formatted = this.toString(date, 'YYYY-MM-DD');
  this._o.field.value = formatted;
}

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

onOpen и передача состояния интерфейса

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

new Pikaday({
  onOpen: function() {
    const current = this.getDate();
    const node = this.el;
    console.log(current, node);
  }
});

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

onClose как точка синхронизации внешнего состояния

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

onClose: function() {
  const selected = this.getDate();
  console.log('Final date:', selected);
}

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

onDraw и передача состояния рендера

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

onDraw: function() {
  console.log('Redraw cycle');
}

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

onDraw: function() {
  const month = this.calendars[0].month;
  const year = this.calendars[0].year;
  console.log(month, year);
}

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

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

const externalState = {
  source: 'formA'
};

new Pikaday({
  onSelect: function(date) {
    externalState.lastDate = date;
  }
});

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

Интеграция событий с формами

Наиболее распространённый сценарий — синхронизация выбранной даты с полем ввода. В этом случае события выступают механизмом двусторонней передачи данных: из UI в модель формы и обратно.

new Pikaday({
  field: document.querySelector('#date'),
  onSelect: function(date) {
    this._o.field.value = this.toString(date, 'DD.MM.YYYY');
  }
});

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

Каскадная передача данных между событиями

События Pikaday могут использовать результаты предыдущих вызовов для формирования нового состояния. Например, onSelect влияет на onClose, поскольку закрытие календаря отражает уже выбранное значение.

new Pikaday({
  onSelect: function(date) {
    this._selectedSnapshot = date;
  },
  onClose: function() {
    console.log(this._selectedSnapshot);
  }
});

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

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

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

new Pikaday({
  onOpen: function() {
    this.sessionId = Date.now();
  },
  onSelect: function(date) {
    console.log(this.sessionId, date);
  }
});

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

Передача данных через переопределение методов

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

const picker = new Pikaday({
  onSelect: function(date) {
    const original = this.toString(date);
    this._formatted = original;
  }
});

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

События как транспорт данных между слоями приложения

Событийная система Pikaday фактически формирует промежуточный слой между DOM и бизнес-логикой. Данные проходят следующий путь:

  1. Пользовательское взаимодействие
  2. Генерация внутреннего события
  3. Вызов колбэка с аргументами
  4. Доступ к состоянию через контекст
  5. Передача данных во внешние структуры

Такой поток обеспечивает детерминированное поведение без необходимости централизованного хранилища событий.

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

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

const pickerA = new Pikaday({
  onSelect: function(date) {
    console.log('A:', date);
  }
});

const pickerB = new Pikaday({
  onSelect: function(date) {
    console.log('B:', date);
  }
});

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

Итоговая модель передачи данных через события

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

Оглавление