Shadcn Date Picker sucks! So I’ve built my own.

Shadcn Date Picker component definitely does not suck, excuse my click bait, 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 simple-date-picker.tsx from here and save it inside /components. Finally, import SimpleDatePicker in your page, and use it, for example:

 <SimpleDatePicker 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 I would love to know what you think feel free to comment or let’s connnect on x.com.