Механизм startRange и endRange в Pikaday
используется для реализации выбора диапазона дат, где календарь
перестаёт быть просто одиночным селектором и начинает работать как
инструмент выделения интервала между двумя точками времени. Эта
концепция лежит в основе range-режима и определяет поведение визуального
выделения, логики выбора и внутренних состояний календаря.
Диапазон дат в Pikaday строится вокруг двух опорных значений:
startRange)endRange)Обе переменные могут существовать одновременно или по отдельности, формируя промежуточные состояния выбора. В отличие от одиночного выбора даты, где хранится одно значение, диапазон требует управления состоянием из двух независимых, но связанных точек.
Ключевая особенность модели заключается в том, что диапазон не является примитивным типом данных — это вычисляемая структура, основанная на сравнении дат и их относительном положении во времени.
startRange определяет левую границу диапазона. Это
первая выбранная дата, с которой начинается построение интервала.
Основные свойства поведения:
endRangeПри наличии только startRange календарь находится в
промежуточном состоянии выбора. Это состояние часто используется для
подсветки потенциального диапазона при наведении на последующие
даты.
Внутренняя логика сравнения строится на проверке:
startRange считаются потенциальным
продолжением диапазонаendRange определяет правую границу диапазона и завершает
формирование интервала.
Основные свойства:
startRange для вычисления всех
промежуточных датПосле установки endRange диапазон считается завершённым,
и календарь переходит в состояние фиксированного выделения.
Обе границы образуют упорядоченную пару, где важен не порядок выбора, а хронологическая последовательность.
Если пользователь выбирает дату раньше уже установленного
startRange, логика может:
startRangeКонкретное поведение зависит от реализации обработчика
onSelect и дополнительных настроек логики диапазона.
Условная нормализация выглядит следующим образом:
startRange > endRange, значения меняются
местамиPikaday использует startRange и endRange не
только для хранения данных, но и для отрисовки состояния календаря.
Типичная визуальная логика включает три состояния ячеек:
startRange — начало диапазонаendRange — конец диапазонаДополнительно используется подсветка при наведении курсора, когда
endRange ещё не задан. В этом случае вычисляется временный
диапазон:
startRange фиксированendRangeЭто позволяет пользователю видеть предварительный результат выбора.
Процесс выбора диапазона можно описать последовательностью состояний:
Первичный клик:
startRange = выбранная датаendRange = nullНаведение:
Второй клик:
endRange = выбранная датаПовторный старт:
Эта модель обеспечивает предсказуемое поведение интерфейса и упрощает управление состоянием.
При выборе диапазона возможны ситуации, когда конечная дата оказывается меньше начальной. В таких случаях применяется нормализация:
startRangeendRangeЭто исключает необходимость отслеживания направления выбора на уровне интерфейса.
Событие onSelect в Pikaday часто используется для
синхронизации диапазона с внешним состоянием.
В контексте startRange и endRange оно
позволяет:
Логика обработки обычно опирается на проверку:
startRange, выбор не
завершёнДля визуального разделения состояний используются классы, привязанные к диапазону:
start-range)end-range)in-range)Каждый класс назначается динамически при рендеринге ячеек, исходя из
сравнения текущей даты с startRange и
endRange.
Состояние, при котором установлен только startRange,
является ключевым для интерактивности.
В этом режиме:
Это состояние требует минимальной задержки вычислений, так как перерасчёт выполняется при каждом движении курсора.
При работе с диапазоном часто возникают логические ошибки:
Корректная реализация требует строгого разделения:
startRange,
endRange)Внутреннее состояние можно представить как конечный автомат:
EMPTY — ни одна дата не выбранаSTART_SELECTED — установлен
startRangeRANGE_COMPLETE — установлены обе границыПереходы между состояниями происходят через пользовательские действия и события календаря, формируя детерминированную модель поведения.