Not getting default classname on using modifiers for week and month range selection

[nikhil2802Vishwakarma]

Hi, I am not able to get the default classname for start (.rdp-range_start) and end(.rdp-range_end) range.

Below is my code for week and month view. I am not sure where I am doing wrong

Week

const range = selectedDate (dayjs object);
<DayPicker
        showOutsideDays
        modifiers={{
          selected: range,
          range_start: range?.from,
          range_end: range?.to,
          range_middle: (date) => range ? rangeIncludesDate(range, date, true) : false,
        }}
        onDayClick={(day, modifiers) => {
          if (modifiers.disabled || modifiers.hidden) return;

          const weekRange = {
            from: startOfWeek(day),
            to: endOfWeek(day),
          };

          dateChangeHandler(weekRange, 'week');
        }}
      />

Month

const range = selectedDate (dayjs object);

    const isInRange = (day) =>
      range?.from && range?.to
        ? day >= range.from && day <= range.to
        : false;

    return (
      <DayPicker
        showOutsideDays
        modifiers={{
          selected: range,
          range_start: range?.from,
          range_end: range?.to,
          range_middle: range,
        }}
        onDayClick={(day, modifiers) => {
          if (modifiers.disabled || modifiers.hidden) return;

          if (isInRange(day)) {
            // toggle off
            dateChangeHandler(undefined, 'month');
            return;
          }

          const monthRange = {
            from: startOfMonth(day),
            to: endOfMonth(day),
          };

          dateChangeHandler(monthRange, 'month');
        }}
      />

[gpbl]

@nikhil2802Vishwakarma I believe the range_* modifiers aren’t matching because DayPicker expects native Date values.

Convert your Dayjs range to Date before passing it, or use function matchers that compare via Dayjs.

For example:

const range = selectedDate
  ? { from: selectedDate.from?.toDate(), to: selectedDate.to?.toDate() }
  : undefined;

<DayPicker
  showOutsideDays
  modifiers={{
    selected: range,
    range_start: range?.from,
    range_end: range?.to,
    range_middle: (date) =>
      range ? rangeIncludesDate(range, date, true) : false,
  }}
  // ...
/>

If you want to keep Dayjs, use function matchers:

modifiers={{
  range_start: (date) => range?.from && dayjs(date).isSame(range.from, "day"),
  range_end: (date) => range?.to && dayjs(date).isSame(range.to, "day"),
  range_middle: (date) =>
    range?.from &&
    range?.to &&
    dayjs(date).isAfter(range.from, "day") &&
    dayjs(date).isBefore(range.to, "day"),
}}

Also, since you’re doing custom selection, remember to mirror onDayClick with onDayKeyDown for Space/Enter to keep keyboard accessibility in sync.

[nikhil2802Vishwakarma]

Hi @gpbl , Thank you for your reponse this works.