Introduction
This custom shadcn component aims to provide a more advanced alternative to the default date picker component. It is built on top of the react-day-picker library, which provides a wide range of customization options.
In the demo above, notice that you can click on the moth label at the top to change the view to years.
Install react-day-picker
Install the package by running the following command in your terminal:
pnpm add react-day-picker@9.0.4Note
It is important to have at least the version 9 of the react-day-picker package installed.For more information on how to install the package, check the official documentation for getting started here.
Update the Calendar component
Update Required
In case you have already used the calendar or date picker component from shadcn, you will need to update it with the following content. We are usingreact-day-pickerversion 9, while shadcn is still on v8, which are not compatible with each other.If you are starting from scratch, follow the instructions over here.
Once you have a working project with shadcn, create a/components/ui/calendar.tsxfile and paste the following code:Date Picker Component
Now create a new date-picker file and paste the following code, depending on your use case.Basic Date Picker
This is the basic date picker component that allows users to select a single date. The main advantage of this component over the shadcn default date picker is the ability navigate through years instead of only one month at a time. This is especially useful when selecting a date of birth.
Date Range Picker
This is the date range picker component that allows users to select a range of dates. It also allows users to navigate through years. This is especially useful when selecting a very long range of dates, such as a holiday period.
Done!
Buy me a coffeeIf you find any bugs or want to suggest improvements, feel free do so. This component is free to use, but if you find it useful, feel free to star the repository on GitHub.
If you want to be extra cool, you can also buy me a coffee and I will be forever grateful.