DatePicker with Popover [enabling shadcn styling for months/years dropdown menu]

[a8ns]

Hi all,
i am using shadcn-ui for basic components and for styling.
User needs to choose his birthday. And the birthdays of many users are like 20 , 30 , 40 or more years from now. I takes so much effort to click month buttons back and forth as well as the DatePicker form moves in case of 6weeks-month and user can miss the button and start all the way over, cause the whole form closes. I want to give user better user experience and decided to use some properties from the underlying DatePicker library: captionLayout='"dropdown-buttons" renders both buttons for changing month as well as dropdowns for years and months to fast pick the month and year. The problem is styling as well as anchor of the form. Any ideas how to make it look shadcn styled?


<PopoverContent className="w-auto p-0" align="start"> <Calendar mode="single" selected={field.value ? new Date(field.value as Date) : undefined} onSelect={(selectedDate) => { field.onChange(selectedDate); dispatch({ type: 'TOGGLE', dateType: 'dob' }); }} disabled={(date) => date > new Date() || date < new Date("1900-01-01") } captionLayout="dropdown-buttons" fromYear={1900} toYear={2025} initialFocus /> </PopoverContent>

[auzeonfung]

#1680 may help ;)

[a8ns]

Thanks! i am new to the merging workflow. Merging is blocked?

[auzeonfung]

Need to wait for someone with access to pass pr before merging it into the main stream, it takes time, they are all busy after all...
For what it's worth, the easiest way to do this is to copy and paste.

I hope this helps.

Usage

"use client"

import * as React from "react"

import { Calendar } from "@/registry/new-york/ui/calendar"

export default function CalendarDropdownButton() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      initialFocus
      mode="single"
      captionLayout="dropdown-buttons" //Also: dropdown | buttons
      fromYear={2022} 
      toYear={2023}
      selected={date}
      onSelect={setDate}
      // numberOfMonths={2} //Add this line, if you want, can be 2 or more
      className="rounded-md border"
    />
  )
}

new-york/ui/calendar.tsx:

"use client"

import * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
import { DayPicker } from "react-day-picker"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/registry/new-york/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/new-york/ui/select"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {

  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {
    const _event = {
      target: {
        value: String(_value)
      },
    } as React.ChangeEvent<HTMLSelectElement>
    _e(_event);
  };

  return (
    <DayPicker
      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-3",
        caption_start: "is-start",
        caption_between: "is-between",
        caption_end: "is-end",
        caption: "flex justify-center pt-1 relative items-center gap-1",
        caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex",
        caption_dropdowns: "flex justify-center grow dropdowns pl-7 pr-8",
        multiple_months: "is-multiple",
        vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden",
        nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-6 w-6 bg-transparent p-0 text-muted-foreground"
        ),
        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",
          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: "text-muted-foreground opacity-50",
        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: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
        Dropdown: ({ ...props }) => (
          <Select
            {...props}
            onValueChange={(value) => {
              if (props.onChange) {
                handleCalendarChange(value, props.onChange)
              }
            }}
            value={props.value as string}
          >
            <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }), "px-2 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
              <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>
            </SelectTrigger>
            <SelectContent className="max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">
              {props.children &&
                React.Children.map(props.children, (child) =>
                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className="min-w-[var(--radix-popper-anchor-width)] pr-7">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>
                )
              }
            </SelectContent>
          </Select>
        ),
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

default/ui/calendar.tsx

"use client"

import * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
import { DayPicker } from "react-day-picker"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/registry/default/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/default/ui/select"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps & { onChange?: React.ChangeEventHandler<HTMLSelectElement> }) {

  const handleCalendarChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {
    const _event = {
      target: {
        value: String(_value)
      },
    } as React.ChangeEvent<HTMLSelectElement>
    _e(_event);
    
  };

  return (
    <DayPicker
      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_start: "is-start",
        caption_between: "is-between",
        caption_end: "is-end",
        caption: "flex justify-center pt-1 relative items-center gap-1",
        caption_label: "flex h-7 text-sm font-medium justify-center items-center grow [.is-multiple_&]:flex",
        caption_dropdowns: "flex justify-center gap-1 grow dropdowns pl-8 pr-9",
        multiple_months: "is-multiple",
        vhidden: "hidden [.is-between_&]:flex [.is-end_&]:flex [.is-start.is-end_&]:hidden",
        nav: "flex items-center [&:has([name='previous-month'])]:order-first [&:has([name='next-month'])]:order-last gap-1",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 text-muted-foreground"
        ),
        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-9 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",
          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-9 w-9 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: "text-muted-foreground opacity-50",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
        Dropdown: ({ ...props }) => (
          <Select
            {...props}
            onValueChange={(value) => {
              if (props.onChange) {
                handleCalendarChange(value, props.onChange)
              }
            }}
            value={props.value as string}
          >
            <SelectTrigger className={cn(buttonVariants({ variant: "ghost" }),"pl-2 pr-1 py-2 h-7 w-fit font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex")}>
              <SelectValue placeholder={props?.caption} >{props?.caption}</SelectValue>
            </SelectTrigger>
            <SelectContent className="max-h-[var(--radix-popper-available-height);] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">
              {props.children &&
                React.Children.map(props.children, (child) =>
                  <SelectItem value={(child as React.ReactElement<any>)?.props?.value} className="min-w-[var(--radix-popper-anchor-width)]">{(child as React.ReactElement<any>)?.props?.children}</SelectItem>
                )
              }
            </SelectContent>
          </Select>
        ),
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

[a8ns]

thanks a lot! that helps. I just gonna use this component! :)

[a8ns]

[larssbr]

Thank you @auzeonfung auzeonfung! That helped me alot! The component is good out of the box =)

[sersavan]

try this one
https://github.com/sersavan/shadcn-calendar-component

[ravics09]

Hi @sersavan ,

Thanks for sharing. Can we disable date selection and show only month and year dropdowns?

[sersavan]

Hi @sersavan ,

Thanks for sharing. Can we disable date selection and show only month and year dropdowns?

hi @ravics09

Do you have an example of how you want it to look?

[sersavan]

i @ravics09

@ravics09

Something like that?

[ravics09]

Hi @sersavan , Yes I am looking for the same popup window where only the month and year dropdown should be visible and the date should be hidden.

[sersavan]

@ravics09

I suggest a more convenient behavior: you can use the mouse wheel directly on the date, or select the period (months from/to and years from/to) inside the popup window.
https://shadcn-calendar-component.vercel.app/

[alikazai]

there is a bug. @auzeonfung code all seems to work fine, but after selecting the month and year from the dropdown then the day, it works to populate my field however if you try go back then it doesnt seem to use the values to re select the correct month and year from the dropdowns.

however i think this is a general issue with the Celender component an not the implementation by @auzeonfung

anyone having similar problem

[JROBLES9]

You must define it with defaultMonth in the props so that it goes to the date that is currently selected, for example:

<Calendar
  mode="single"
  defaultMonth={yourDate}
  captionLayout="dropdown-buttons"
  fromYear={2022} 
  toYear={2025}
  initialFocus
  className="rounded-md border"
/>