Обработчик onSelect

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

Момент срабатывания onSelect

Обработчик onSelect вызывается после того, как пользователь:

  • кликнул по конкретному дню в календаре;
  • выбрал дату через клавиатурную навигацию и подтвердил выбор;
  • изменил значение через API, если вызов привёл к фиксации новой даты.

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

Сигнатура обработчика

Стандартная форма объявления:

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

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

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

Внутри onSelect контекст this ссылается на экземпляр пикера. Это позволяет обращаться ко всем внутренним методам и свойствам календаря:

onSelect: function(date) {
    console.log(this.getDate());
    console.log(this.toString());
}

Через this доступны методы:

  • getDate() — получение текущей выбранной даты;
  • toString() — строковое представление даты;
  • setDate() — программная установка значения;
  • gotoDate() — переход к указанной дате.

Обновление связанных элементов интерфейса

Частое применение onSelect связано с синхронизацией выбранной даты с input-полем:

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

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

Форматирование даты внутри onSelect

По умолчанию дата возвращается как объект Date, но часто требуется преобразование в строку. Pikaday поддерживает форматирование через метод toString(format):

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

Использование форматов позволяет адаптировать вывод под локальные стандарты или требования серверного API.

Использование внешних функций

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

function handleDateChange(date, picker) {
    const value = picker.toString('YYYY-MM-DD');
    document.querySelector('#output').textContent = value;
}

const picker = new Pikaday({
    field: document.getElementById('date'),
    onSelect: function(date) {
        handleDateChange(date, this);
    }
});

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

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

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

Связь с режимом range selection

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

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

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

Программное вызовы и onSelect

При использовании setDate() поведение onSelect зависит от передаваемых параметров:

  • если дата отличается от текущей — событие срабатывает;
  • если дата совпадает — обработчик не вызывается.
picker.setDate(new Date());

Это поведение предотвращает лишние вызовы логики обновления.

Интеграция с формами и валидацией

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

onSelect: function(date) {
    const isValid = date > new Date();
    document.querySelector('#error').style.display = isValid ? 'none' : 'block';
}

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

Особенности работы в разных браузерах

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

  • особенностей обработки кликов;
  • поддержки клавиатурной навигации;
  • локальных настроек времени.

Тем не менее сам механизм вызова обработчика остаётся стабильным и унифицированным.

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

При использовании кастомных шаблонов календаря onSelect остаётся центральной точкой синхронизации состояния. Независимо от того, как отрисованы дни, событие выбора всегда приводит к передаче Date в обработчик, обеспечивая единообразие поведения.

onSelect: function(date) {
    updateCustomCalendarState(date);
}

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

Влияние на состояние календаря

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

  • фиксируется текущая выбранная дата;
  • пересчитывается отображение выделенного дня;
  • обновляются зависимости (например, min/max ограничения, если они заданы динамически).

Таким образом, onSelect не только уведомляет внешнюю логику, но и завершает цикл изменения состояния внутри календаря.

Оглавление