Bug: Year selection is not working when prop mode="range" is passed

[cichyadam]

I have started to use the DatePicker, however when I use the range mode, the year selection does not work as expected, the bug can be easily recreated on a demo page

Screen.Recording.2025-02-12.at.14.55.23.mov

[Ganbin]

I have look into the code and this is because of this code

shadcn-date-picker/src/components/ui/calendar.tsx

Lines 491 to 499 in 504f735

	onClick={() => {
	setNavView("days")
	goToMonth(
	new Date(
	displayYears.from + i,
	(selected as Date | undefined)?.getMonth() ?? 0
	)
	)
	}}

In range mode selected will return an object with from and to which are of type Date.

I tried something but the useDayPicker cannot return a selected with a type that is dynamic. Or at least I was not able to do it. And we would need to pass down the mode type from Calendar until the YearGrid component.

I'm working on a workaround by forcing TS to override the type. I will come back here once I have a working solution.

P.S. it is the same issue as #9

[Ganbin]

Here is a workaround for #9 and #10 that works. I don't really like the "hack" but I believe the issue come from the returned type from useDayPicker that should be an union instead of undefined that would allow to narrow correctly the type.

function YearGrid({
  className,
  startMonth,
  endMonth,
  displayYears,
  navView,
  setNavView,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & {
  className?: string;
  startMonth?: Date;
  endMonth?: Date;
  displayYears: { from: number; to: number };
  navView: NavView;
  setNavView: React.Dispatch<React.SetStateAction<NavView>>;
}) {
  const { goToMonth, selected: selectedRange } = useDayPicker<{
    mode: "range";
  }>();
  const { selected: selectedSingle } = useDayPicker<{
    mode: "single";
  }>();
  const { selected: selectedMultiple } = useDayPicker<{
    mode: "multiple";
  }>();

  const getSelectedMonth = React.useCallback((): number => {
    if (selectedRange && selectedRange.from instanceof Date) {
      return selectedRange.from.getMonth();
    }
    if (selectedSingle && selectedSingle instanceof Date) {
      return selectedSingle.getMonth();
    }
    if (
      selectedMultiple &&
      selectedMultiple.length > 0 &&
      selectedMultiple[0] instanceof Date
    ) {
      return selectedMultiple[0].getMonth();
    }
    return new Date().getMonth();
  }, [selectedRange, selectedSingle, selectedMultiple]);

  return (
    <div className={cn("grid grid-cols-4 gap-y-2", className)} {...props}>
      {Array.from(
        { length: displayYears.to - displayYears.from + 1 },
        (_, i) => {
          const isBefore =
            differenceInCalendarDays(
              new Date(displayYears.from + i, 11, 31),
              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
              startMonth!,
            ) < 0;
          const isAfter =
            differenceInCalendarDays(
              new Date(displayYears.from + i, 0, 0),
              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
              endMonth!,
            ) > 0;
          const isDisabled = isBefore || isAfter;
          return (
            <Button
              className={cn(
                "text-foreground h-7 w-full text-sm font-normal",
                displayYears.from + i === new Date().getFullYear() &&
                  "bg-accent text-accent-foreground font-medium",
              )}
              disabled={navView === "years" ? isDisabled : undefined}
              key={i}
              variant="ghost"
              onClick={() => {
                setNavView("days");
                goToMonth(new Date(displayYears.from + i, getSelectedMonth()));
              }}
            >
              {displayYears.from + i}
            </Button>
          );
        },
      )}
    </div>
  );
}

[alexalannunes]

My workaround

setNavView("days");
if (mode === "range") {
  const selectedRange = selected as unknown as { from: Date; to: Date };
  // if mode is range, use `selectedRange.from`
  goToMonth(
    new Date(displayYears.from + i, selectedRange.from?.getMonth() ?? new Date().getMonth())
  );
  return;
}
goToMonth(new Date(displayYears.from + i, (selected as Date | undefined)?.getMonth() ?? 0));