Параметр onSelect

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

Синтаксис

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: function(date) {
        // Логика обработки выбранной даты
    }
});
  • date — объект Date, соответствующий выбранной пользователем дате.
  • Контекст вызова внутри функции (this) указывает на экземпляр Pikaday, что позволяет использовать методы календаря, например getDate() или setDate().

Примеры использования

1. Отображение выбранной даты в поле ввода

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

В данном примере значение поля ввода обновляется текстовым представлением выбранной даты. Используется метод toDateString(), который возвращает строку в формате "Wed Jun 01 2026".

2. Форматирование даты с помощью moment.js

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

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

3. Взаимодействие с другими элементами интерфейса

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: function(date) {
        document.getElementById('dayOfWeek').textContent = date.toLocaleDateString('ru-RU', { weekday: 'long' });
    }
});

Здесь при выборе даты автоматически отображается день недели в отдельном элементе интерфейса. Функция toLocaleDateString с параметром { weekday: 'long' } возвращает полное название дня недели на русском языке.

Использование this внутри onSelect

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

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: function(date) {
        console.log('Текущая дата календаря:', this.getDate());
        this.hide(); // закрытие календаря после выбора даты
    }
});

Методы, доступные через this:

  • getDate() — возвращает текущую выбранную дату.
  • setDate(date) — устанавливает дату программно.
  • show() — открывает календарь.
  • hide() — скрывает календарь.
  • gotoDate(date) — перемещает календарь к указанной дате без изменения выбора.

Условия для вызова onSelect

  • Функция вызывается только после выбора даты, как с помощью клика по календарю, так и при программной установке даты через метод setDate(), если передан флаг true вторым аргументом.
picker.setDate(new Date(), true); // onSelect сработает
picker.setDate(new Date());       // onSelect не сработает
  • Не вызывается при закрытии календаря без выбора даты.
  • Работает совместно с параметрами minDate и maxDate. Если выбранная дата выходит за допустимые границы, onSelect не срабатывает.

Комбинация с другими параметрами Pikaday

  • format — позволяет автоматически обновлять значение поля ввода в нужном формате.
  • field — обеспечивает привязку к конкретному элементу.
  • disableDayFn — можно использовать совместно с onSelect, чтобы реагировать только на допустимые даты.
  • i18n — при международной локализации можно адаптировать отображение выбранной даты.

Пример с комбинацией нескольких параметров:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    minDate: new Date(),
    maxDate: new Date(2026, 11, 31),
    format: 'DD.MM.YYYY',
    onSelect: function(date) {
        console.log('Выбрана дата в формате DD.MM.YYYY:', this.getMoment().format('DD.MM.YYYY'));
    }
});

Рекомендации по использованию

  • Всегда использовать this для доступа к текущему экземпляру календаря, чтобы не опираться на глобальные переменные.
  • При динамическом создании нескольких экземпляров Pikaday, убедиться, что каждая функция onSelect корректно связывает данные с конкретным полем.
  • Если требуется выполнять асинхронные операции (например, загрузка событий из сервера), onSelect можно использовать для триггера AJAX-запросов или обновления интерфейса.

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

Оглавление