DOCSEARCHbyAlgolia
Submit Docs

DateRangePicker for shadcn

repository·main·Indexed 21 days ago

https://github.com/johnpolacek/date-range-picker-for-shadcn

A reusable DateRangePicker component for shadcn projects built with Radix UI and Tailwind CSS. It features a dropdown interface for selecting date ranges via presets, text entry, and calendar selection, with optional date comparison capabilities and responsive design.

Tokens
1.3K
Snippets
4
Records
5
Agent score
27%

What's inside shadcn-date-range-picker

  1. Install the DateRangePicker component

    main

    The DateRangePicker is a reusable component built for Shadcn using Radix UI and Tailwind CSS. To use it, you must first install the required Shadcn UI components and the Radix UI icons library.

    1. Install Shadcn dependencies using the CLI:
    npx shadcn-ui@latest add button calendar label popover switch
    1. Install Radix UI icons:
    npm install @radix-ui/react-icons
    1. Copy source files: Copy the code from the /src directory for DateInput and DateRangePicker into your project. The code is provided for you to customize as needed.

  2. Configure the DateRangePicker component

    main

    The DateRangePicker component is a React component used to select a primary date range and an optional comparison date range. It supports presets (like 'Last 7 days'), manual date input, and a calendar view.

    Key features:

    • Comparison Mode: When showCompare is enabled, users can toggle a comparison range (typically offset by one year) to compare current data against a previous period.
    • Presets: Built-in presets for common ranges like 'Today', 'Yesterday', 'Last 30 days', etc.
    • Responsive Design: Automatically adjusts the number of visible calendar months and preset selection UI based on screen width (threshold < 960px).
    • Controlled Updates: Changes are only emitted via onUpdate when the user clicks the 'Update' button and the values have actually changed from when the popover was opened.
    import { DateRangePicker } from './date-range-picker'

<DateRangePicker 
  onUpdate={({ range, rangeCompare }) => {
    console.log('Selected range:', range);
    console.log('Comparison range:', rangeCompare);
  }}
  showCompare={true}
  locale="en-US"
/>

  3. Use the DateRangePicker component

    main

    You can implement the DateRangePicker by providing an onUpdate callback and configuring initial dates, alignment, and locale. You can also toggle the comparison feature using showCompare.

    In this example, the component is configured with a fixed range for 2023, aligned to the start, using British English formatting, and with the comparison feature disabled.

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

  4. Configure DateRangePicker props

    main

    The DateRangePicker component accepts the following props to control its behavior, initial state, and appearance:

    NameTypeDefaultDescription
    onUpdatefunction-Callback function called when the date range is updated. Receives an object containing the selected date range and, if showCompare is enabled, the compare date range.
    initialDateFromDate or stringToday’s DateThe initial start date for the main date range.
    initialDateToDate or string-The initial end date for the main date range.
    initialCompareFromDate or string-The initial start date for the compare date range.
    initialCompareToDate or string-The initial end date for the compare date range.
    alignstring'end'Popover alignment. Options: 'start', 'center', or 'end'.
    localestring'en-US'Locale used for date formatting.
    showComparebooleantrueWhether to show the compare date range feature.

  5. DateRangePickerProps reference

    main

    The following props are available for the DateRangePicker component:

    export interface DateRangePickerProps {
  /** Click handler for applying the updates from DateRangePicker. */
  onUpdate?: (values: { range: DateRange, rangeCompare?: DateRange }) => void
  /** Initial value for start date */
  initialDateFrom?: Date | string
  /** Initial value for end date */
  initialDateTo?: Date | string
  /** Initial value for start date for compare */
  initialCompareFrom?: Date | string
  /** Initial value for end date for compare */
  initialCompareTo?: Date | string
  /** Alignment of popover */
  align?: 'start' | 'center' | 'end'
  /** Option for locale */
  locale?: string
  /** Option for showing compare feature */
  showCompare?: boolean
}

interface DateRange {
  from: Date
  to: Date | undefined
}