[feat]: Quick Navigation by Year in Calendar #6196

chesha1 · 2024-12-28T11:09:42Z

Feature description

In the current version of the Calendar, there are only two buttons for navigating to the previous or next month.

I wonder if it would be possible to add a way to select a specific year or month, similar to using captionLayout="dropdown" in React DayPicker. Since Calendar is built on the DayPicker component from React DayPicker, it feels natural to extend this functionality. While we can set captionLayout, fromYear and toYear in <Calendar>, this approach lacks official support from shadcn/ui, leading to bad caption styling.

Alternatively, another approach could be to add two additional buttons on either side of the existing ones, allowing users to jump to the previous or next year, similar to the calendar in Ant Design. While this might require more effort, I guess adding two buttons could better align with the minimalist design philosophy of libraries like shadcn.

similar issue #880

Affected component/components

Calendar

Additional Context

Additional details here...

Before submitting

I've made research efforts and searched the documentation
I've searched for existing issues and PRs

The text was updated successfully, but these errors were encountered:

huybuidac · 2024-12-31T02:51:59Z

Perhaps we need to wait a long time for this, so I’ve created a simple version in the meantime.

https://github.com/huybuidac/shadcn-datetime-picker
https://shadcn-datetime-picker-pro.vercel.app/?path=/story/datetimepicker--min-max

chesha1 · 2025-01-06T11:17:19Z

I implemented the two additional buttons version, and below is the preview image and source code, I am wondering if shadcn/ui teams will consider this plan or select plan.

// Calendar.tsx
"use client"

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

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  const [month, setMonth] = React.useState(new Date())

  const handlePreviousYear = () => {
    setMonth((prev) => {
      const newDate = new Date(prev)
      newDate.setFullYear(newDate.getFullYear() - 1)
      return newDate
    })
  }

  const handleNextYear = () => {
    setMonth((prev) => {
      const newDate = new Date(prev)
      newDate.setFullYear(newDate.getFullYear() + 1)
      return newDate
    })
  }

  const handlePreviousMonth = () => {
    setMonth((prev) => {
      const newDate = new Date(prev)
      newDate.setMonth(newDate.getMonth() - 1)
      return newDate
    })
  }

  const handleNextMonth = () => {
    setMonth((prev) => {
      const newDate = new Date(prev)
      newDate.setMonth(newDate.getMonth() + 1)
      return newDate
    })
  }

  return (
    <DayPicker
      month={month}
      onMonthChange={setMonth}
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-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-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        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-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
          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" }),
          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        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:bg-accent/50 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={{
        Caption: ({ displayMonth }) => (
          <div className="flex items-center justify-between">
            <button
              type="button"
              onClick={handlePreviousYear}
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
              )}
            >
              <ChevronsLeft className="h-4 w-4" />
            </button>
            <button
              type="button"
              onClick={handlePreviousMonth}
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
              )}
            >
              <ChevronLeft className="h-4 w-4" />
            </button>
            <span className="text-sm font-medium">
              {displayMonth.toLocaleString("default", {
                month: "long",
                year: "numeric",
              })}
            </span>
            <button
              type="button"
              onClick={handleNextMonth}
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
              )}
            >
              <ChevronRight className="h-4 w-4" />
            </button>
            <button
              type="button"
              onClick={handleNextYear}
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
              )}
            >
              <ChevronsRight className="h-4 w-4" />
            </button>
          </div>
        ),
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

zepartner · 2025-01-08T12:49:07Z

I implemented the two additional buttons version, and below is the preview image and source code, I am wondering if shadcn/ui teams will consider this plan or select plan.
```tsx // Calendar.tsx "use client"
import * as React from "react"
import { ChevronLeft, ChevronsLeft, ChevronRight, ChevronsRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps

function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
const [month, setMonth] = React.useState(new Date())

const handlePreviousYear = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setFullYear(newDate.getFullYear() - 1)
return newDate
})
}

const handleNextYear = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setFullYear(newDate.getFullYear() + 1)
return newDate
})
}

const handlePreviousMonth = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setMonth(newDate.getMonth() - 1)
return newDate
})
}

const handleNextMonth = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setMonth(newDate.getMonth() + 1)
return newDate
})
}

return (
<DayPicker
month={month}
onMonthChange={setMonth}
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-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-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
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-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
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" }),
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
),
day_range_start: "day-range-start",
day_range_end: "day-range-end",
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:bg-accent/50 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={{
Caption: ({ displayMonth }) => (

<button
type="button"
onClick={handlePreviousYear}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

<button
type="button"
onClick={handlePreviousMonth}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

{displayMonth.toLocaleString("default", {
month: "long",
year: "numeric",
})}

<button
type="button"
onClick={handleNextMonth}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

<button
type="button"
onClick={handleNextYear}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

),
}}
{...props}
/>
)
}
Calendar.displayName = "Calendar"

export { Calendar }

Thanks! Your solution works well!

zepartner · 2025-01-08T13:19:53Z

I implemented the two additional buttons version, and below is the preview image and source code, I am wondering if shadcn/ui teams will consider this plan or select plan.
```tsx // Calendar.tsx "use client"
import * as React from "react"
import { ChevronLeft, ChevronsLeft, ChevronRight, ChevronsRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps

function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
const [month, setMonth] = React.useState(new Date())

const handlePreviousYear = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setFullYear(newDate.getFullYear() - 1)
return newDate
})
}

const handleNextYear = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setFullYear(newDate.getFullYear() + 1)
return newDate
})
}

const handlePreviousMonth = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setMonth(newDate.getMonth() - 1)
return newDate
})
}

const handleNextMonth = () => {
setMonth((prev) => {
const newDate = new Date(prev)
newDate.setMonth(newDate.getMonth() + 1)
return newDate
})
}

return (
<DayPicker
month={month}
onMonthChange={setMonth}
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-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-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
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-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
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" }),
"h-8 w-8 p-0 font-normal aria-selected:opacity-100"
),
day_range_start: "day-range-start",
day_range_end: "day-range-end",
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:bg-accent/50 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={{
Caption: ({ displayMonth }) => (

<button
type="button"
onClick={handlePreviousYear}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

<button
type="button"
onClick={handlePreviousMonth}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

{displayMonth.toLocaleString("default", {
month: "long",
year: "numeric",
})}

<button
type="button"
onClick={handleNextMonth}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

<button
type="button"
onClick={handleNextYear}
className={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
)}
>

),
}}
{...props}
/>
)
}
Calendar.displayName = "Calendar"

export { Calendar }

Here is a small change I made to allow for setting a default opening month in the picker:

// Calendar.jsx
'use client';

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

import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/lib/utils';

function Calendar({ className, classNames, defaultStartMonth, showOutsideDays = true, ...props }) {
	const [month, setMonth] = React.useState(() => {
		if (defaultStartMonth) {
			return new Date(defaultStartMonth);
		} else {
			return new Date();
		}
	});

	const handlePreviousYear = () => {
		setMonth(prev => {
			const newDate = new Date(prev);
			newDate.setFullYear(newDate.getFullYear() - 1);
			return newDate;
		});
	};

	const handleNextYear = () => {
		setMonth(prev => {
			const newDate = new Date(prev);
			newDate.setFullYear(newDate.getFullYear() + 1);
			return newDate;
		});
	};

	const handlePreviousMonth = () => {
		setMonth(prev => {
			const newDate = new Date(prev);
			newDate.setMonth(newDate.getMonth() - 1);
			return newDate;
		});
	};

	const handleNextMonth = () => {
		setMonth(prev => {
			const newDate = new Date(prev);
			newDate.setMonth(newDate.getMonth() + 1);
			return newDate;
		});
	};

	return (
		<DayPicker
			month={month}
			onMonthChange={setMonth}
			showOutsideDays={showOutsideDays}
			className={cn('p-3', className)}
			classNames={{
				months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
				month: 'space-y-4',
				caption: 'flex justify-center pt-1 relative items-center',
				caption_label: 'text-sm font-medium',
				nav: 'space-x-1 flex items-center',
				nav_button: cn(buttonVariants({ variant: 'outline' }), 'h-7 w-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-y-1',
				head_row: 'flex',
				head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
				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-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
					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' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
				day_range_start: 'day-range-start',
				day_range_end: 'day-range-end',
				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:bg-accent/50 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={{
				Caption: ({ displayMonth }) => (
					<div className="flex items-center justify-between">
						<button
							type="button"
							onClick={handlePreviousYear}
							className={cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')}>
							<ChevronsLeft className="h-4 w-4" />
						</button>
						<button
							type="button"
							onClick={handlePreviousMonth}
							className={cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')}>
							<ChevronLeft className="h-4 w-4" />
						</button>
						<span className="text-sm font-medium">
							{displayMonth.toLocaleString('default', {
								month: 'long',
								year: 'numeric',
							})}
						</span>
						<button
							type="button"
							onClick={handleNextMonth}
							className={cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')}>
							<ChevronRight className="h-4 w-4" />
						</button>
						<button
							type="button"
							onClick={handleNextYear}
							className={cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')}>
							<ChevronsRight className="h-4 w-4" />
						</button>
					</div>
				),
			}}
			{...props}
		/>
	);
}
Calendar.displayName = 'Calendar';

export { Calendar };

USED AS FOLLOWS:

<Calendar
	mode="single"
	selected={date}
	onSelect={setDate}
	defaultStartMonth={date || defaultStartMonth || minValue || new Date()}
	disabled={date => date > maxValue || date < minValue}
	initialFocus 
/>

luchillo17 · 2025-02-13T00:53:43Z

Why not use the captionLayout="dropdown" option? it needs some class names changes to look good but it looks like this when properly setup (well I didn't polish it much, the dropdowns extend way out of the popover):

Show images

chesha1 · 2025-02-13T02:31:16Z

@luchillo17 Hello. While using dropdown menus or select for quick month navigation is a great approach, there are already some existing implementations of this pattern (as seen in #1680 and #1739). Therefore, I propose an alternative solution utilizing two buttons for year navigation. This lightweight approach maintains a visually clean interface while providing efficient temporal navigation.

luchillo17 · 2025-02-13T03:43:26Z

The issue with those is that those have been open since October 2023 and yet no resolution (and those are actual PRs), I fear this one will follow a similar pattern where it's never realized in the library.

oscadev · 2025-02-22T02:23:31Z

Is there literally still no way to select a date, say for example, from feb 2000 without clicking the left arrow on the month 12*25 times?

chesha1 · 2025-02-22T03:04:01Z

@oscadev Currently, there's no official implementation for direct date selection. While the default interface would require 12×25 clicks, the community has developed two practical solutions:

Selection within the caption area: See discussion in issues feat(calendar): enhance calendar component with dropdown selector #1680 and fix(examples): command not searching properly in examples #1793 regarding direct year/month selection.
Year navigation buttons: As demonstrated in this issue, this method reduces the required clicks to just 25 (one per year).

luchillo17 · 2025-02-26T11:21:34Z

@luchillo17 Hello. While using dropdown menus or select for quick month navigation is a great approach, there are already some existing implementations of this pattern (as seen in #1680 and #1739). Therefore, I propose an alternative solution utilizing two buttons for year navigation. This lightweight approach maintains a visually clean interface while providing efficient temporal navigation.

Also visually clean doesn't mean functional, the dropdown layout might need some refinements (especially this example I tweaked myself) but it's way better when the input is meant for distant dates like date of birth and such:

chesha1 added the area: request label Dec 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat]: Quick Navigation by Year in Calendar #6196

[feat]: Quick Navigation by Year in Calendar #6196

chesha1 commented Dec 28, 2024 •

edited

Loading

huybuidac commented Dec 31, 2024

chesha1 commented Jan 6, 2025

zepartner commented Jan 8, 2025

zepartner commented Jan 8, 2025

luchillo17 commented Feb 13, 2025 •

edited

Loading

chesha1 commented Feb 13, 2025

luchillo17 commented Feb 13, 2025 •

edited

Loading

oscadev commented Feb 22, 2025

chesha1 commented Feb 22, 2025

luchillo17 commented Feb 26, 2025

[feat]: Quick Navigation by Year in Calendar #6196

[feat]: Quick Navigation by Year in Calendar #6196

Comments

chesha1 commented Dec 28, 2024 • edited Loading

Feature description

Affected component/components

Additional Context

Before submitting

huybuidac commented Dec 31, 2024

chesha1 commented Jan 6, 2025

zepartner commented Jan 8, 2025

zepartner commented Jan 8, 2025

Here is a small change I made to allow for setting a default opening month in the picker:

USED AS FOLLOWS:

luchillo17 commented Feb 13, 2025 • edited Loading

chesha1 commented Feb 13, 2025

luchillo17 commented Feb 13, 2025 • edited Loading

oscadev commented Feb 22, 2025

chesha1 commented Feb 22, 2025

luchillo17 commented Feb 26, 2025

chesha1 commented Dec 28, 2024 •

edited

Loading

luchillo17 commented Feb 13, 2025 •

edited

Loading

luchillo17 commented Feb 13, 2025 •

edited

Loading