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.
Furthermore, it allows usage with react-day-picker version 9, which is not compatible with the current shadcn date picker component.
In the demo above, notice that you can click on the month label at the top to change the view to years.
Installing
Update Required
react-day-picker version 9, while shadcn is still on v8, which are not compatible with each other.pnpm dlx shadcn@latest add https://date-picker.luca-felix.com/r/date-picker.jsonUsage
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.