Метод setStartRange

В библиотеке Pikaday механизм выбора диапазона дат реализуется через расширение функциональности календаря, позволяя фиксировать начальную и конечную границы диапазона. Метод setStartRange отвечает за установку начальной даты диапазона выделения и является ключевым элементом при работе с range-подобным поведением календаря.

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

Сигнатура и назначение

Метод вызывается на экземпляре Pikaday:

picker.setStartRange(date);

Параметры

  • date — объект Date, который определяет начальную границу диапазона.

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

Внутреннее состояние диапазона

При использовании расширения range в Pikaday обычно задействуются две ключевые переменные состояния:

  • startRange — начало диапазона
  • endRange — конец диапазона

Метод setStartRange изменяет только первую из них, оставляя вторую неизменной.

Внутренне это может выглядеть как:

this._o.startRange = date;
this.draw();

или в расширенных реализациях:

this._rangeStart = date;
this._inSelectionMode = true;

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

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

1. Установка новой начальной точки

Если диапазон ранее не был задан, метод фиксирует новую отправную точку:

picker.setStartRange(new Date(2026, 0, 10));

Результат:

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

2. Перезапись существующего диапазона

При наличии уже установленного диапазона вызов setStartRange обычно приводит к сбросу предыдущего состояния:

picker.setStartRange(new Date(2026, 0, 5));
picker.setEndRange(new Date(2026, 0, 15));
picker.setStartRange(new Date(2026, 0, 20));

Результат:

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

3. Поведение при некорректной дате

Если в метод передаётся некорректный объект:

picker.setStartRange("2026-01-10");

поведение зависит от реализации:

  • в базовом Pikaday ожидается Date, поэтому строка может привести к игнорированию значения
  • в расширенных версиях возможно приведение через new Date(value)

Связь с setEndRange

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

picker.setStartRange(new Date(2026, 5, 1));
picker.setEndRange(new Date(2026, 5, 10));

Логика взаимодействия:

  1. setStartRange фиксирует левую границу
  2. setEndRange фиксирует правую границу
  3. календарь отрисовывает выделенный интервал

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

Использование в пользовательских сценариях

1. Выбор диапазона кликом

Типичный сценарий:

picker.on('select', function(date) {
    if (!picker.getStartRange()) {
        picker.setStartRange(date);
    } else {
        picker.setEndRange(date);
    }
});

Здесь setStartRange играет роль первого шага интерактивного выбора.

2. Предустановка диапазона

Часто применяется при фильтрации данных:

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

Используется для:

  • отчётов
  • аналитических панелей
  • форм с предзаполненными периодами

3. Сброс диапазона

Для очистки состояния:

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

или через пересоздание экземпляра.

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

Влияние на отрисовку календаря

После вызова setStartRange выполняется перерасчёт визуального состояния:

  • подсветка стартовой даты
  • активация режима выбора диапазона
  • обновление классов CSS для ячеек календаря

В DOM это обычно отражается через классы вроде:

  • is-inrange
  • is-startrange
  • is-selected

Работа с внутренними ограничениями

Метод учитывает настройки ограничения дат:

  • minDate
  • maxDate
  • disableDayFn

Если установленная начальная дата выходит за допустимые границы, возможны следующие варианты поведения:

  1. игнорирование установки
  2. автоматическая корректировка
  3. визуальное отображение без возможности завершения диапазона

Взаимодействие с режимом bound

При использовании bound-инпутов (двух связанных полей: начало и конец):

new Pikaday({
    field: document.getElementById('start'),
    bound: true
});

setStartRange часто применяется для синхронизации значений между двумя календарями.

Пример логики:

startPicker.setStartRange(date);
endPicker.setMinDate(date);

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

Типичные ошибки использования

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

picker.setStartRange("2026-01-10");

Ошибка: отсутствие нормализации входных данных в базовой реализации.

Несогласованность start/end

picker.setEndRange(new Date(2026, 0, 1));
picker.setStartRange(new Date(2026, 0, 10));

Результат: логически некорректный диапазон.

Игнорирование перерисовки

В некоторых кастомных форках Pikaday требуется явный вызов:

picker.setStartRange(date);
picker.draw();

Если draw() не вызывается автоматически, UI может не обновиться.

Особенности поведения при навигации по месяцам

При изменении месяца:

  • установленный startRange сохраняется
  • подсветка переносится на новый календарный месяц
  • диапазон визуально растягивается через границы месяцев

Это важно при выборе длинных периодов (несколько месяцев подряд).

Расширенные сценарии использования

Динамическое изменение диапазона

function updateRange(start, end) {
    picker.setStartRange(start);
    picker.setEndRange(end);
}

Используется при:

  • загрузке данных с сервера
  • синхронизации нескольких календарей
  • восстановлении состояния интерфейса

Ограничение выбора только после установки startRange

picker.on('select', function(date) {
    if (!picker.getStartRange()) {
        picker.setStartRange(date);
        picker.setMinDate(date);
    } else {
        picker.setEndRange(date);
    }
});

Такой подход предотвращает выбор некорректного диапазона.

Взаимодействие с CSS и кастомизацией

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

  • стартовая ячейка получает is-startrange
  • промежуточные даты — is-inrange
  • конечная — is-endrange

Это позволяет полностью контролировать визуализацию через стили:

.is-startrange {
    background-color: #2d7ff9;
    color: #fff;
}

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

При интерактивной работе пользователь может переопределять старт диапазона:

  1. выбирается start
  2. выбирается end
  3. повторный клик сбрасывает end
  4. новый клик вызывает setStartRange повторно

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

Совместимость с кастомными плагинами

Расширения Pikaday, добавляющие range selection, часто переопределяют поведение:

  • auto-range selection
  • hover-preview диапазона
  • блокировка выходных

В таких случаях setStartRange становится точкой синхронизации между логикой UI и состоянием календаря.

Роль в архитектуре Pikaday

Метод относится к категории низкоуровневых API управления состоянием выбора дат. Он:

  • не занимается форматированием
  • не управляет DOM напрямую
  • работает через обновление состояния экземпляра
  • инициирует перерисовку интерфейса

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

Оглавление