Параметр pickWholeWeek

Параметр pickWholeWeek управляет поведением выбора даты в календаре Pikaday и определяет, будет ли пользователь выбирать одну конкретную дату или сразу всю календарную неделю при клике по любому дню.

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

При включении:

pickWholeWeek: true

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

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

Логика работы при включённом pickWholeWeek

При клике на любую дату внутри недели Pikaday:

  • определяется неделя, к которой принадлежит выбранный день;
  • вычисляется диапазон: начало недели и конец недели;
  • визуально выделяется вся неделя;
  • в обработчик onSelect передаётся дата, соответствующая выбранному дню (или началу недели, в зависимости от реализации);
  • разработчик может самостоятельно интерпретировать результат как диапазон.

Важный нюанс: Pikaday и работа с диапазонами

Pikaday изначально не является date-range пикером. Поэтому pickWholeWeek не превращает его в полноценный range selector, а лишь меняет семантику выбора.

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

  • pickWholeWeek: true
  • обработчик onSelect
  • вспомогательная логика вычисления начала и конца недели

Пример инициализации

const picker = new Pikaday({
    field: document.getElementById('datepicker'),
    pickWholeWeek: true,
    firstDay: 1,
    onSelect: function(date) {
        console.log('Выбран день недели:', date);
    }
});

Как вычисляется неделя

При включённом pickWholeWeek неделя определяется на основе выбранной даты и настройки firstDay.

Если:

firstDay: 1 // понедельник

то:

  • началом недели считается ближайший понедельник;
  • концом недели — воскресенье.

Если:

firstDay: 0 // воскресенье

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

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

Параметр firstDay напрямую влияет на поведение pickWholeWeek.

  • firstDay: 1 — стандарт для большинства европейских интерфейсов
  • firstDay: 0 — стандарт для США

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

Влияние на UI и выделение недели

При включении pickWholeWeek обычно активируется дополнительная логика CSS-классов:

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

Часто используется связка с кастомными стилями:

.is-selected-week {
    background-color: #e6f2ff;
}

или через классы, добавляемые Pikaday при рендере календаря.

Обработка в onSelect

Поскольку Pikaday не возвращает диапазон напрямую, стандартная практика — вычисление границ недели внутри onSelect:

onSelect: function(date) {
    const start = getStartOfWeek(date);
    const end = getEndOfWeek(date);

    console.log(start, end);
}

Где getStartOfWeek и getEndOfWeek реализуются вручную на основе логики firstDay.

Сценарии применения

Использование pickWholeWeek оправдано в системах, где данные агрегируются по неделям:

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

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

Ограничения поведения

Несмотря на удобство, параметр имеет ряд особенностей:

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

Совместимость с другими параметрами

pickWholeWeek часто используется вместе с:

  • showWeekNumber — для отображения номера недели;
  • firstDay — для настройки начала недели;
  • onDraw — для кастомной отрисовки недель;
  • onSelect — для обработки выбранного периода.

Поведение при отключённом pickWholeWeek

При значении:

pickWholeWeek: false

календарь работает в стандартном режиме:

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

Это поведение является дефолтным и используется в большинстве сценариев.

Оглавление