[Bug]: Date Picker not usable for Selecting Birth Date, despite this use case being advertised.

[johanneskares]

trafficstars

Describe the bug

Has anyone actually tried to use the date picker for selecting your bith date?

It's basically impossible, because you can't select the year.

Affected component/components

Date Picker, Calendar

How to reproduce

Obvious

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

all browsers

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[johanneskares]

For anyone looking for a solution, here is a small modification to the component that works for me.

<Calendar
    selected={field.value}
    onSelect={field.onChange}
    disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
    captionLayout="dropdown"
    toYear={2010}
    fromYear={1900}
    classNames={{
        day_hidden: "invisible",
        dropdown: "px-2 py-1.5 rounded-md bg-popover text-popover-foreground text-sm  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
        caption_dropdowns: "flex gap-3",
        vhidden: "hidden",
        caption_label: "hidden",
    }}
    initialFocus
/>

I'm happy to create a PR to add this as a variant.

[TheZodo]

really nice @johanneskares I guess I took a hard route and just used another component. Tremendously helpful!

[Nikkakko]

@johanneskares
its fine but when you select calendar and re-open , its reseted. how can we fix it?

[camposvictor]

@johanneskares its fine but when you select calendar and re-open , its reseted. how can we fix it?

https://react-day-picker.js.org/basics/navigation

you have to pass the current field value to the defaultMonth prop.

[nathanielrich]

it would be great when this works for range too... if i change the date in the caption it changes for both calendar views...

[dmr]

This is a great ticket and solution, thank you!

[DallasBelt]

Thanks! Hopefully the calendar can work as expected with the property captionLayout='dropdown' with an update.

[flixlix]

feel free to use this variant. you will need react-day-picker v9 or above: https://github.com/shadcn-ui/ui/pull/4421

I think this is better UX than a Select Dropdown, it is inspired by: https://material.angular.io/components/datepicker/overview