Метод gotoYear

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

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

Основные сценарии использования:

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

Синтаксис

picker.gotoYear(year);

Параметры

Параметр Тип Описание
year Number Год, к которому необходимо перейти

Возвращаемое значение

Метод ничего не возвращает.

undefined

Простейший пример

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

picker.gotoYear(2030);

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

Если календарь был открыт на июне 2025 года, после вызова метода он покажет июнь 2030 года.

Как работает переход

Важно понимать, что gotoYear() не изменяет выбранную дату.

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

Например:

picker.setDate(new Date(2024, 4, 15));

picker.gotoYear(2035);

В этом случае:

  • выбранная дата останется 15 мая 2024 года;
  • календарь визуально перейдёт к 2035 году;
  • значение поля ввода не изменится.

Это позволяет разделять понятия:

  • выбранная дата;
  • отображаемый месяц и год.

Отличие от setDate

Новички часто путают gotoYear() и setDate().

gotoYear

picker.gotoYear(2030);

Изменяет только отображение календаря.

setDate

picker.setDate(new Date(2030, 0, 1));

Изменяет выбранную дату и обновляет поле ввода.

Сравнение:

Метод Меняет отображение Меняет выбранную дату
gotoYear() Да Нет
setDate() Да Да

Переход по нажатию кнопки

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

<input id="date">

<button id="show2050">
    Показать 2050 год
</button>
const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('show2050')
    .addEventListener('click', () => {
        picker.gotoYear(2050);
    });

После нажатия кнопки календарь перейдёт к 2050 году.

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

Метод удобно комбинировать с элементом <select>.

<select id="years">
    <option>2020</option>
    <option>2025</option>
    <option>2030</option>
    <option>2035</option>
</select>
const picker = new Pikaday({
    field: document.getElementById('date')
});

document
    .getElementById('years')
    .addEventListener('change', function () {
        picker.gotoYear(Number(this.value));
    });

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

Навигация по архиву

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

const archiveYears = [
    2018,
    2019,
    2020,
    2021,
    2022
];

function showArchive(year) {
    picker.gotoYear(year);
}

Такой подход часто встречается в:

  • системах документооборота;
  • бухгалтерских программах;
  • архивах новостей;
  • аналитических панелях.

Переход к текущему году

Текущий год можно определить через объект Date.

const currentYear = new Date().getFullYear();

picker.gotoYear(currentYear);

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

Работа с динамическими вычислениями

Метод принимает любое числовое выражение.

const currentYear = new Date().getFullYear();

picker.gotoYear(currentYear + 5);

Переход на пять лет вперёд.

picker.gotoYear(currentYear - 10);

Переход на десять лет назад.

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

Год может вводиться пользователем вручную.

<input id="yearInput" type="number">
<button id="go">
    Перейти
</button>
document
    .getElementById('go')
    .addEventListener('click', () => {

        const year = Number(
            document.getElementById('yearInput').value
        );

        picker.gotoYear(year);
    });

Проверка корректности значения

Перед вызовом рекомендуется проверять входные данные.

const year = Number(input.value);

if (!Number.isNaN(year)) {
    picker.gotoYear(year);
}

Более строгий вариант:

const year = Number(input.value);

if (
    Number.isInteger(year) &&
    year >= 1900 &&
    year <= 2100
) {
    picker.gotoYear(year);
}

Такой подход предотвращает ошибки интерфейса и повышает устойчивость приложения.

Совместное использование с gotoMonth

Нередко требуется указать не только год, но и месяц.

picker.gotoYear(2030);
picker.gotoMonth(6);

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

Следует помнить, что месяцы в Pikaday нумеруются с нуля:

Значение Месяц
0 Январь
1 Февраль
2 Март
3 Апрель
4 Май
5 Июнь
6 Июль
7 Август
8 Сентябрь
9 Октябрь
10 Ноябрь
11 Декабрь

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

Для точного позиционирования часто применяется метод gotoDate().

picker.gotoDate(
    new Date(2040, 8, 10)
);

Однако если необходимо изменить только год, использование gotoYear() выглядит более наглядным и читаемым.

Ограничения minDate и maxDate

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

const picker = new Pikaday({
    field: input,
    minDate: new Date(2020, 0, 1),
    maxDate: new Date(2030, 11, 31)
});

Попытка перейти далеко за пределы диапазона:

picker.gotoYear(2050);

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

Поэтому при работе с ограничениями полезно самостоятельно контролировать диапазон:

if (year >= 2020 && year <= 2030) {
    picker.gotoYear(year);
}

Переход к году рождения

Один из наиболее распространённых сценариев — выбор даты рождения.

Без программного перехода пользователю пришлось бы долго перелистывать календарь.

birthYearButton.addEventListener('click', () => {
    picker.gotoYear(1990);
});

Либо:

picker.gotoYear(1985);
picker.gotoMonth(0);

что позволяет сразу показать январь нужного года.

Использование в больших формах

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

function openEmployee(employee) {

    picker.gotoYear(
        employee.hireYear
    );

}

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

Производительность

Метод работает очень быстро, поскольку:

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

Даже многократные вызовы:

picker.gotoYear(2020);
picker.gotoYear(2021);
picker.gotoYear(2022);
picker.gotoYear(2023);

обычно не создают заметной нагрузки на интерфейс.

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

Передача строки вместо числа

picker.gotoYear("2030");

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

Правильнее:

picker.gotoYear(2030);

или

picker.gotoYear(
    Number(yearString)
);

Передача некорректного значения

picker.gotoYear(undefined);

или

picker.gotoYear(NaN);

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

Ожидание изменения выбранной даты

Ошибка проектирования:

picker.gotoYear(2040);

console.log(
    picker.getDate()
);

Некоторые разработчики ожидают увидеть дату из 2040 года.

На самом деле метод изменяет только отображение календаря. Для изменения выбранной даты необходимо использовать setDate().

Отсутствие проверки пользовательского ввода

picker.gotoYear(
    Number(input.value)
);

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

Безопаснее:

const year = Number(input.value);

if (Number.isInteger(year)) {
    picker.gotoYear(year);
}

Практические рекомендации

Использовать gotoYear() для навигации, а не для выбора даты.

Проверять корректность года перед передачей в метод.

Комбинировать с gotoMonth() для точного позиционирования календаря.

Использовать при работе с историческими и будущими периодами, где последовательное перелистывание неудобно.

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

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

Оглавление