A favicon of shadcn-date-picker

shadcn-date-picker

An enhanced Shadcn date picker using react-day-picker v9. Offers year navigation, single/range selection, and improved usability for modern applications.

A screenshot of shadcn-date-pickerVisit

Enhanced Shadcn Date Picker with Year Navigation and react-day-picker v9

This advanced Shadcn date picker component significantly enhances user interaction by integrating react-day-picker version 9. It addresses limitations of the default Shadcn date picker by offering superior customization and compatibility with the newer library version. A standout feature is the intuitive year navigation, accessible by clicking the month label, which streamlines selecting dates, especially for birth years or extended timeframes, greatly improving the overall user experience in date-intensive applications.

Features:

  • Year View Navigation: Enables users to click the month label to switch to a year-centric view, greatly simplifying the selection of dates distant in the past or future.
  • react-day-picker v9 Integration: Built on top of react-day-picker version 9, allowing developers to leverage its latest features and improvements not found in v8.
  • Single Date Selection Mode: Provides a standard date picker component for selecting a single, specific date, enhanced with the year navigation capability.
  • Date Range Selection Mode: Includes a component for selecting a continuous range of dates, also benefiting from the intuitive year navigation feature.
  • Optimized for Distant Date Selection: The year navigation makes it particularly useful for scenarios like selecting a date of birth or historical events.
  • Efficient Long Period Selection: Streamlines the process of choosing extended date periods, such as for booking holidays or planning projects spanning multiple months/years.
  • Extensive Customization Options: Inherits a wide array of customization possibilities from the underlying react-day-picker library.
  • Shadcn CLI Installation: Offers a straightforward installation method using the shadcn CLI with a provided component URL.
  • Solves react-day-picker v8/v9 Incompatibility: Provides a solution for using react-day-picker v9 within Shadcn, overcoming incompatibility issues with components reliant on v8.

Summary:

In essence, this tool delivers a more powerful and user-friendly date selection experience for Shadcn UI developers. By incorporating react-day-picker v9, it provides advanced features like year navigation for both single date and date range selections. This makes it an ideal replacement for the standard date picker when dealing with distant dates or requiring the flexibility and modern capabilities of the latest react-day-picker library, ultimately simplifying development and enhancing application usability.

Distribution:
opensource
0
Share:

 

  
 

Similar to shadcn-date-picker: