search

johnpolacek / date-range-picker-for-shadcn

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison
https://date-range-picker-for-shadcn-demo.vercel.app/
MIT License
700 stars 28 forks source link
datepicker shadcn shadcn-ui tailwind tailwind-css

readme

DateRangePicker Component

DateRangePicker is a reusable component built for Shadcn using beautifully designed components from Radix UI and Tailwind CSS. It provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.

View the Demo

Installation

The DateRangePicker depends on the following components from shadcn:

If you are using the CLI for installation, you can do this:

npx shadcn-ui@latest add button calendar label popover switch

The DateRangePicker uses icons from Radix UI so you will need to install that or update the component to use a different library.

npm install @radix-ui/react-icons

Next, copy and paste the code from the /src directory for DateInput and DateRangePicker into your project and customize to your needs. The code is yours.

Props

Name Type Default Description
onUpdate function - Callback function that is called when the date range is updated. The function receives an object containing the selected date range and, if the compare feature is enabled, the compare date range.
initialDateFrom Date or string Today’s Date The initial start date for the main date range.
initialDateTo Date or string - The initial end date for the main date range.
initialCompareFrom Date or string - The initial start date for the compare date range.
initialCompareTo Date or string - The initial end date for the compare date range.
align string 'end' The alignment of the dropdown popover. Options are 'start', 'center', or 'end'.
locale string 'en-US' The locale used for date formatting.
showCompare boolean true Whether to show the compare date range feature.

Example

<DateRangePicker
  onUpdate={(values) => console.log(values)}
  initialDateFrom="2023-01-01"
  initialDateTo="2023-12-31"
  align="start"
  locale="en-GB"
  showCompare={false}
/>

This example creates a DateRangePicker component with an initial date range from January 1, 2023 to December 31, 2023. The dropdown popover is aligned to the start of the trigger button, the dates are formatted according to the 'en-GB' locale, and the compare feature is hidden. The onUpdate function logs the selected date range to the console.