Метод hide

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

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

Синтаксис

picker.hide();

Метод не принимает аргументов и не возвращает значения.

Основное назначение

После создания экземпляра Pikaday календарь может отображаться автоматически или открываться при взаимодействии с полем ввода. Метод hide() позволяет программно закрыть календарь в любой момент.

Пример:

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

picker.hide();

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

Как работает скрытие календаря

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

  1. Проверяется текущее состояние календаря.
  2. Снимается признак отображения.
  3. Применяются CSS-классы, отвечающие за скрытие.
  4. Интерфейс удаляется из визуального потока страницы.
  5. Сохраняются все данные о выбранной дате.

Важно понимать, что объект Pikaday не уничтожается. Экземпляр продолжает существовать в памяти и может быть снова показан при помощи метода show().

Пример последовательности:

picker.show();

console.log('Календарь открыт');

picker.hide();

console.log('Календарь закрыт');

Скрытие после выбора даты

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

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

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

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

Использование с кнопкой

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

<input id="date">
<button id="closeBtn">Закрыть календарь</button>
const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('closeBtn')
    .addEventListener('click', () => {
        picker.hide();
    });

В данном примере пользователь может закрыть календарь вручную.

Переключение состояния календаря

Часто требуется реализовать поведение переключателя: если календарь открыт — закрыть его, если закрыт — открыть.

button.addEventListener('click', () => {

    if (picker.isVisible()) {
        picker.hide();
    } else {
        picker.show();
    }

});

Здесь используется связка методов:

  • show()
  • hide()
  • isVisible()

Такая комбинация позволяет полностью контролировать отображение календаря.

Работа с модальными окнами

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

closeModalButton.addEventListener('click', () => {

    picker.hide();

    modal.style.display = 'none';

});

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

Скрытие при потере фокуса

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

input.addEventListener('blur', () => {

    setTimeout(() => {
        picker.hide();
    }, 200);

});

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

Использование в адаптивных интерфейсах

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

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

        if (window.innerWidth < 768) {
            this.hide();
        }

    }
});

Такой подход делает интерфейс более компактным.

Вызов из пользовательских функций

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

function closeCalendar() {
    picker.hide();
}
closeCalendar();

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

Взаимодействие с методом show

Методы show() и hide() являются взаимодополняющими.

Пример полного цикла:

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

picker.show();

setTimeout(() => {
    picker.hide();
}, 3000);

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

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

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

Скрытие после отправки формы

form.addEventListener('submit', () => {
    picker.hide();
});

Скрытие при прокрутке страницы

window.addEventListener('scroll', () => {
    picker.hide();
});

Скрытие при изменении размеров окна

window.addEventListener('resize', () => {
    picker.hide();
});

Подобные сценарии часто используются в сложных веб-приложениях.

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

Хотя вызов hide() для уже скрытого календаря обычно безопасен, иногда полезно выполнить предварительную проверку.

if (picker.isVisible()) {
    picker.hide();
}

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

Отличие от destroy

Новички часто путают методы hide() и destroy().

hide()

picker.hide();

Результат:

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

destroy()

picker.destroy();

Результат:

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

Поэтому hide() следует рассматривать исключительно как средство управления видимостью интерфейса.

Типичные ошибки

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

Ошибка:

picker.hide();

при отсутствии объекта:

let picker;

Результат:

TypeError: Cannot read properties of undefined

Правильно:

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

picker.hide();

Потеря ссылки на объект

Ошибка:

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

picker.hide();

Переменная picker отсутствует.

Правильно:

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

picker.hide();

Попытка использовать после уничтожения

picker.destroy();

picker.hide();

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

Практический пример

<input id="date">
<button id="open">Открыть</button>
<button id="close">Закрыть</button>
const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('open')
    .addEventListener('click', () => {
        picker.show();
    });

document
    .getElementById('close')
    .addEventListener('click', () => {
        picker.hide();
    });

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

Оглавление