Year Navigation

[adarshSrivastava01]

Similar to the arrows where I can switch between months, is there a way I can add arrows to switch between years. It becomes really hard if someone want to add his/her birthday date.

I can see the props to pass custom LeftIcon and RightIcon, but there is no way I can pass or add Icons for Year navigation as shown in above image, with double chevron icon.

[gpbl]

Hi @adarshSrivastava01m this is a good idea, thanks for sharing. Follow #2433 for updates.

[arielmell0]

I ran into this issue while using the shadcn DayPicker.

This library currently doesn't support changing the year.

So I'm sharing the solution I came up with, in case anyone else runs into the same problem of not being able to switch years.

"react-day-picker": "^8.10.1"
"tailwindcss": "^4"

Preview:

Calendar component code:
(Compatible with ShadcnUI)

"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
import { DayPicker, useNavigation } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@components/ui/select"

function YearNavigation({ 
  displayedYear, 
  onChange 
}: { 
  displayedYear: number, 
  onChange: (year: number) => void 
}) {
  const currentYear = new Date().getFullYear();
  const years = Array.from(
    { length: currentYear - 1900 + 1 }, 
    (_, i) => 1900 + i
  );
  
  return (
    <Select value={displayedYear.toString()} onValueChange={(value) => onChange(parseInt(value))}>
      <SelectTrigger className="w-[100px]">
        <SelectValue placeholder={displayedYear.toString()} />
      </SelectTrigger>
      <SelectContent>
        {years.map((year) => (
          <SelectItem key={year} value={year.toString()}>
            {year}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  const [displayedMonth, setDisplayedMonth] = React.useState<Date>(props.defaultMonth || new Date());
  const currentYear = new Date().getFullYear();

  const handleYearChange = (year: number) => {
    const newDate = new Date(displayedMonth);
    newDate.setFullYear(year);
    setDisplayedMonth(newDate);
  };

  const handlePreviousYear = () => {
    const newDate = new Date(displayedMonth);
    newDate.setFullYear(newDate.getFullYear() - 1);
    setDisplayedMonth(newDate);
  };

  const handleNextYear = () => {
    const newYear = displayedMonth.getFullYear() + 1;
    if (newYear <= currentYear) {
      const newDate = new Date(displayedMonth);
      newDate.setFullYear(newYear);
      setDisplayedMonth(newDate);
    }
  };

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      month={displayedMonth}
      onMonthChange={setDisplayedMonth}
      classNames={{
        months: "flex flex-col sm:flex-row gap-2",
        month: "flex flex-col gap-4 w-full",
        caption: "flex justify-center pt-1 relative items-center w-full",
        caption_label: "text-sm font-medium",
        nav: "flex items-center gap-1",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-x-1",
        head_row: "flex w-full",
        head_cell:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem] flex-1",
        row: "flex w-full mt-2",
        cell: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md flex-1",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
            : "[&:has([aria-selected])]:rounded-md"
        ),
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "size-8 p-0 font-normal aria-selected:opacity-100 w-full"
        ),
        day_range_start:
          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
        day_range_end:
          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ className, ...props }) => (
          <ChevronLeft className={cn("size-4", className)} {...props} />
        ),
        IconRight: ({ className, ...props }) => (
          <ChevronRight className={cn("size-4", className)} {...props} />
        ),
        Caption: ({ displayMonth }) => {
          const { goToMonth, nextMonth, previousMonth } = useNavigation();
          const isCurrentYear = displayMonth.getFullYear() === currentYear;
          
          return (
            <div className="flex justify-center items-center gap-4">
              <div className="flex">
                <button
                  onClick={handlePreviousYear}
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 mr-1",
                    "hover:cursor-pointer"
                  )}
                >
                  <ChevronsLeft className="size-4" />
                </button>
                <button
                  onClick={() => previousMonth && goToMonth(previousMonth)}
                  disabled={!previousMonth}
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
                    "hover:cursor-pointer"
                  )}
                >
                  <ChevronLeft className="size-4" />
                </button>
              </div>
              
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium">
                  {format(displayMonth, 'MMMM')}
                </span>
                <YearNavigation 
                  displayedYear={displayMonth.getFullYear()} 
                  onChange={handleYearChange} 
                />
              </div>
              
              <div className="flex">
                <button
                  onClick={() => nextMonth && goToMonth(nextMonth)}
                  disabled={!nextMonth}
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
                    "hover:cursor-pointer"
                  )}
                >
                  <ChevronRight className="size-4" />
                </button>
                <button
                  onClick={handleNextYear}
                  disabled={isCurrentYear}
                  className={cn(
                    buttonVariants({ variant: "outline" }),
                    "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 ml-1",
                    "hover:cursor-pointer"
                  )}
                >
                  <ChevronsRight className="size-4" />
                </button>
              </div>
            </div>
          );
        }
      }}
      {...props}
    />
  )
}

// Helper function to format date
function format(date: Date, format: string) {
  const months = [
    'January', 'February', 'March', 'April', 'May', 'June', 
    'July', 'August', 'September', 'October', 'November', 'December'
  ];
  
  if (format === 'MMMM') {
    return months[date.getMonth()];
  }
  
  return date.toLocaleDateString();
}

export { Calendar }

[savdav96]

you saved me from hours of work, thanks man!