Date Picker missing styles for captionLayout="dropdown" | "dropdown-buttons"

[mirashif]

Pass fromYear, toYear to get the above result.

<Calendar
  mode="single"
  selected={field.value}
  onSelect={field.onChange}
  disabled={date =>
    date > new Date() || date < new Date('1900-01-01')
  }
  initialFocus
  captionLayout="dropdown-buttons"
  fromYear={1900}
  toYear={new Date().getFullYear()}
/>

[Thisisjuke]

Hey :v: Relative to : https://github.com/shadcn/ui/pull/320 ?

I was also looking for this for Birthdate picker.

I adjusted some styles so that it's correct and functional while waiting for the captionLayout="dropdown-buttons" mode to be styled (I do not change the style of the dropdowns).

styles.css (global)

.rdp [aria-hidden="true"]{
    @apply hidden;
}

.rdp-vhidden{
    @apply hidden;
}

Calendar.tsx (shadcn one):

<DayPicker
     ...
     classNames={{
        ...
        month: 'space-y-4',
-       caption: 'flex justify-center pt-1 relative items-center',
-       caption_label: 'text-sm font-medium',
+       caption: 'flex justify-between pt-1 relative items-center gap-2 px-2',
+       caption_label: 'text-sm font-medium capitalize',
+       caption_dropdowns: 'flex justify-center gap-2',
-       nav_button_previous: 'absolute left-1',
-       nav_button_next: 'absolute right-1',
        ...
    }}
>

[apudiu]

This was unfortunate to see this obvious issue. In scenarios like DOB, the calendar is near impossible to use.

[agusgarcia3007]

Same issue here. @Thisisjuke solution works pretty well for me

[tmahir99]

Yes, this is an issue and should be resolved ASAP. Thank you for a temporary fix @Thisisjuke

Hey ✌️ Relative to : #320 ?

I was also looking for this for Birthdate picker.

I adjusted some styles so that it's correct and functional while waiting for the captionLayout="dropdown-buttons" mode to be styled (I do not change the style of the dropdowns).

styles.css (global)

.rdp [aria-hidden="true"]{
    @apply hidden;
}

.rdp-vhidden{
    @apply hidden;
}

Calendar.tsx (shadcn one):

<DayPicker
     ...
     classNames={{
        ...
        month: 'space-y-4',
-       caption: 'flex justify-center pt-1 relative items-center',
-       caption_label: 'text-sm font-medium',
+       caption: 'flex justify-between pt-1 relative items-center gap-2 px-2',
+       caption_label: 'text-sm font-medium capitalize',
+       caption_dropdowns: 'flex justify-center gap-2',
-       nav_button_previous: 'absolute left-1',
-       nav_button_next: 'absolute right-1',
        ...
    }}
>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.