Метод setEndRange

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

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

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

Сигнатура метода:

picker.setEndRange(date);

Параметры:

Параметр Тип Описание
date Date Конечная дата диапазона

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

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

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

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

picker.setEndRange(new Date(2025, 11, 31));

В данном примере в качестве конечной точки диапазона устанавливается 31 декабря 2025 года.

Работа совместно с setStartRange

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

picker.setStartRange(new Date(2025, 0, 1));
picker.setEndRange(new Date(2025, 0, 31));

Здесь формируется диапазон:

01.01.2025 — 31.01.2025

Pikaday получает информацию о начале и конце периода и может корректно отображать выбранный интервал.

Использование при выборе периода бронирования

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

const checkIn = new Date(2025, 5, 10);
const checkOut = new Date(2025, 5, 20);

picker.setStartRange(checkIn);
picker.setEndRange(checkOut);

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

Динамическая установка конечной даты

Дата окончания может вычисляться программно.

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

const startDate = new Date();

const endDate = new Date(startDate);
endDate.setDate(endDate.getDate() + 7);

picker.setStartRange(startDate);
picker.setEndRange(endDate);

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

Изменение конечной границы диапазона

Метод можно вызывать многократно.

picker.setEndRange(new Date(2025, 2, 15));

picker.setEndRange(new Date(2025, 2, 20));

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

Использование с двумя календарями

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

Первый календарь отвечает за начало периода, второй — за окончание.

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

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

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

startPicker.setStartRange(startDate);
startPicker.setEndRange(endDate);

endPicker.setStartRange(startDate);
endPicker.setEndRange(endDate);

В результате оба календаря отображают один и тот же интервал.

Передача даты из поля ввода

Нередко дата окончания берётся из пользовательского ввода.

const value = document.getElementById('endDate').value;

picker.setEndRange(new Date(value));

Если поле содержит корректную дату, она становится конечной границей диапазона.

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

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

const endDate = new Date(userValue);

if (!isNaN(endDate.getTime())) {
    picker.setEndRange(endDate);
}

Подобная проверка предотвращает появление некорректных значений.

Автоматический расчёт даты окончания

Часто конечная дата определяется продолжительностью периода.

Например, необходимо создать диапазон длительностью один месяц.

const startDate = new Date(2025, 0, 1);

const endDate = new Date(startDate);
endDate.setMonth(endDate.getMonth() + 1);

picker.setStartRange(startDate);
picker.setEndRange(endDate);

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

Использование в системе отчётности

При формировании отчётов диапазон дат может задаваться программно.

const reportStart = new Date(2025, 3, 1);
const reportEnd = new Date(2025, 3, 30);

picker.setStartRange(reportStart);
picker.setEndRange(reportEnd);

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

Сброс конечной даты

При необходимости диапазон можно очистить.

В зависимости от реализации приложения обычно используют значение null.

picker.setEndRange(null);

Либо создают новый диапазон с другими параметрами.

picker.setStartRange(null);
picker.setEndRange(null);

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

Особенности отображения диапазонов

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

Например:

picker.setDate(new Date(2025, 6, 10));

picker.setStartRange(new Date(2025, 6, 1));
picker.setEndRange(new Date(2025, 6, 31));

Здесь существуют одновременно:

  • выбранная дата — 10 июля;
  • начало диапазона — 1 июля;
  • конец диапазона — 31 июля.

Это разные внутренние состояния календаря.

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

Метод часто применяется внутри обработчиков выбора даты.

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

        const endDate = new Date(date);

        endDate.setDate(endDate.getDate() + 14);

        this.setStartRange(date);
        this.setEndRange(endDate);
    }
});

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

Взаимодействие с ограничениями дат

Метод setEndRange не проверяет автоматически ограничения, установленные через minDate и maxDate.

Например:

picker.setEndRange(new Date(2035, 0, 1));

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

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

if (endDate <= maxDate) {
    picker.setEndRange(endDate);
}

Формирование пользовательского диапазона

Распространённый сценарий выбора периода выглядит следующим образом:

let startDate = null;
let endDate = null;

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

        if (!startDate) {

            startDate = date;

            this.setStartRange(startDate);

        } else {

            endDate = date;

            this.setEndRange(endDate);
        }
    }
});

Первый выбор формирует начало диапазона, второй — его окончание.

Сравнение с setStartRange

Оба метода являются взаимодополняющими.

Метод Назначение
setStartRange() Устанавливает начало диапазона
setEndRange() Устанавливает конец диапазона

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

picker.setStartRange(startDate);
picker.setEndRange(endDate);

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

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

Метод setEndRange активно используется в следующих задачах:

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

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

Оглавление