Shadcn Date Picker with custom implementation

Shadcn Date Picker that comes with this component library definitely does not suck, but there are a couple of use cases where using this component is not ideal, for example, selecting date of birth, let's explore why.

Shadcn implementation

If you look at the example from shadcn/ui date picker, selecting your Date of Birth would mean that you would have to click on the left arrow for ages to get to let's say 1983. It's not possible to select a year nor month. Even if you could, examples of these implementations are not very intuitive for users, from my experience.

Solution

Date Picker from shadcn was built using a combination of Popover and the Calendar. Instead of using Calendar I am using Select and ScrollArea components. And that looks like this:

As you can see user can select day, month and a year, which in my opinion is faster and easier. You can check out the demo here.

How to use

To use this component just install Select and ScrollArea components (and shadcn obviously). Copy shadcn-date-picker.tsx from here and save it inside /components. Finally, import ShadcnDatePicker in your page, and use it, for example:

 <ShadcnDatePicker
    startYear={1930}
    endYear={2030}
    selected={date}
    onSelect={setDate}
 />

As you can see, you can select start year and end year based on your needs, date picker also has some validation, for example it will throw an error if user selects 31/2.

That's it, hope you enjoyed this post! If you tried this simple component If you enjoyed this post I'd love it if you could give me a follow on Twitter by clicking on the button below! :)