Метод show

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

Синтаксис метода выглядит следующим образом:

picker.show();

Метод не принимает аргументов и не возвращает значения. Его единственная задача — сделать календарь видимым.

Назначение метода

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

Метод show() используется для решения следующих задач:

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

Базовый пример

Создание экземпляра календаря и его открытие через кнопку:

<input type="text" id="date">

<button id="openCalendar">
    Открыть календарь
</button>

const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('openCalendar')
    .addEventListener('click', function () {
        picker.show();
    });

После нажатия кнопки вызывается метод show(), и календарь становится видимым.

Работа с состоянием календаря

Pikaday поддерживает два основных состояния:

Скрытое.
Отображаемое.

Метод show() переводит компонент в отображаемое состояние.

Например:

picker.show();

После выполнения вызова календарь появляется на экране.

Для обратной операции используется метод:

picker.hide();

Таким образом формируется простая схема управления:

picker.show(); // показать

picker.hide(); // скрыть

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

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

Пример:

const picker = new Pikaday({
    field: document.getElementById('date'),
    bound: false
});

Теперь календарь не привязан к поведению поля ввода.

Открытие выполняется исключительно вручную:

picker.show();

Подобный подход часто применяется в кастомных интерфейсах.

Открытие календаря после загрузки страницы

Метод может использоваться сразу после создания объекта.

window.addEventListener('load', function () {
    picker.show();
});

После завершения загрузки страницы календарь автоматически появится на экране.

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

Отображение после выполнения условия

Метод можно вызывать только при выполнении определённой логики.

Пример проверки возраста:

const age = 18;

if (age >= 18) {
    picker.show();
}

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

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

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

function openDatePicker() {
    picker.show();
}

Далее функция может вызываться из разных частей приложения:

openDatePicker();

Подобная организация делает код более структурированным.

Открытие календаря через другой элемент

Нередко календарь открывается по нажатию на иконку.

<input type="text" id="date">
<span id="calendarIcon">?</span>

const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('calendarIcon')
    .addEventListener('click', function () {
        picker.show();
    });

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

Вызов из пользовательского меню

Рассмотрим интерфейс фильтрации данных.

document
    .getElementById('filterDate')
    .addEventListener('click', function () {
        picker.show();
    });

При выборе пункта меню календарь появляется рядом с соответствующим полем.

Открытие после выбора другого значения

Часто используется цепочка действий.

countrySelect.addEventListener('change', function () {
    picker.show();
});

После выбора страны автоматически открывается календарь для указания даты.

Работа с несколькими календарями

На странице может существовать несколько экземпляров Pikaday.

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

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

Открытие конкретного календаря:

startPicker.show();

или

endPicker.show();

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

Последовательное отображение календарей

Иногда необходимо открыть второй календарь после выбора даты в первом.

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

const startPicker = new Pikaday({
    field: document.getElementById('start'),
    onSelect: function () {
        endPicker.show();
    }
});

После выбора даты начала автоматически открывается календарь окончания периода.

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

Совместное использование с методом setDate()

Можно сначала установить дату, а затем открыть календарь.

picker.setDate(new Date());

picker.show();

В открывшемся окне будет выделена текущая дата.

Совместное использование с gotoDate()

Перед отображением календарь можно переместить к нужной дате.

const date = new Date(2030, 5, 15);

picker.gotoDate(date);

picker.show();

После открытия пользователь сразу увидит июнь 2030 года.

Проверка видимости перед открытием

В некоторых проектах полезно контролировать текущее состояние календаря.

Например:

if (!picker.isVisible()) {
    picker.show();
}

Такой код предотвращает лишние вызовы метода.

Использование в модальных окнах

При работе с модальными окнами календарь часто открывается после появления самого окна.

modal.addEventListener('shown', function () {
    picker.show();
});

Это позволяет избежать проблем с позиционированием элемента до момента отображения модального интерфейса.

Взаимодействие с событиями Pikaday

Метод show() может использоваться совместно с обработчиками событий.

Пример:

const picker = new Pikaday({
    field: document.getElementById('date'),
    onOpen: function () {
        console.log('Календарь открыт');
    }
});

Открытие:

picker.show();

После отображения сработает обработчик onOpen.

Поведение при повторном вызове

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

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

Компонент остаётся открытым.

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

Программное управление интерфейсом

Метод особенно полезен в приложениях, где интерфейс формируется динамически.

Пример:

function activateDateMode() {
    picker.show();
}

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

Типичные области применения

Формы бронирования

arrivalPicker.show();

Открытие выбора даты заезда.

Системы оформления заказов

deliveryPicker.show();

Выбор даты доставки.

Панели аналитики

reportPicker.show();

Выбор периода формирования отчёта.

CRM-системы

meetingPicker.show();

Назначение даты встречи.

Отличие от автоматического открытия по фокусу

Автоматическое открытие:

<input>

Пользователь устанавливает фокус в поле, после чего календарь появляется самостоятельно.

Программное открытие:

picker.show();

Календарь отображается исключительно по команде JavaScript.

Это обеспечивает полный контроль над поведением интерфейса.

Распространённые ошибки

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

Неверно:

picker.show();

если объект ещё не существует.

Правильно:

const picker = new Pikaday({
    field: document.getElementById('date')
});

picker.show();

Вызов после уничтожения календаря

После использования метода destroy() объект становится недоступным для нормальной работы.

picker.destroy();

picker.show();

Такой код может привести к ошибкам.

Отсутствие поля привязки

Неверная конфигурация:

const picker = new Pikaday();

Рекомендуется всегда корректно указывать параметры и элемент, с которым работает календарь.

Практические преимущества метода `show()`

Метод show() обеспечивает:

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

Благодаря этому show() относится к числу ключевых методов управления жизненным циклом интерфейса календаря в библиотеке Pikaday.

Метод show

Назначение метода

Базовый пример

Работа с состоянием календаря

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

Открытие календаря после загрузки страницы

Отображение после выполнения условия

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

Открытие календаря через другой элемент

Вызов из пользовательского меню

Открытие после выбора другого значения

Работа с несколькими календарями

Последовательное отображение календарей

Совместное использование с методом setDate()

Совместное использование с gotoDate()

Проверка видимости перед открытием

Использование в модальных окнах

Взаимодействие с событиями Pikaday

Поведение при повторном вызове

Программное управление интерфейсом

Типичные области применения

Формы бронирования

Системы оформления заказов

Панели аналитики

CRM-системы

Отличие от автоматического открытия по фокусу

Распространённые ошибки

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

Вызов после уничтожения календаря

Отсутствие поля привязки

Практические преимущества метода show()

Практические преимущества метода `show()`