UIGetting StartedDate Range Picker

Date Range Picker

An enhanced date picker with built-in range presets and flexible UX.

The Date Range Picker is an extensible component built on top of the shadcn calendar. It provides a user-friendly way to select a date range, with built-in presets for common ranges like "Today", "Yesterday", "Last 7 Days", "This Month", and more. This improves UX by allowing users to quickly pick common date ranges or select custom ranges from a calendar.

Features

  • Preset Ranges: Quickly select from common date ranges (Today, Yesterday, This Week, Last 7 Days, etc.).
  • Custom Range Selection: Pick any date range using the calendar.
  • Clear Selection: Easily clear the selected range.
  • Customizable Trigger: Adjust button style, size, and placeholder.
  • Callback Support: Get notified when the range changes.
  • Flexible Display: Show or hide internal presets.

Installation

pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/date-range-picker

Usage

import DateRangePicker from "@/components/date-range-picker";
 
function Example() {
  const [range, setRange] = React.useState();
 
  return (
    <DateRangePicker
      dateRange={range}
      onChange={setRange}
      placeholder="Select date range"
      triggerVariant="outline"
      triggerSize="default"
      showInternalPresets={true}
    />
  );
}

Props

PropTypeDefaultDescription
dateRange{ from?: Date; to?: Date }undefinedThe selected date range.
dayCountnumberundefinedNumber of days for the initial range (e.g., 7 for last 7 days).
placeholderstring"Pick a date"Placeholder text for the trigger button.
triggerVariant"default" | "outline" | "secondary" | "ghost""outline"Style variant for the trigger button.
triggerSize"default" | "sm" | "lg""default"Size of the trigger button.
triggerClassNamestringundefinedAdditional class names for the trigger button.
onChange(date: { from?: Date; to?: Date }) => voidundefinedCallback when the date range changes.
showInternalPresetsbooleantrueShow or hide the built-in preset ranges.

Preset Ranges

The following presets are available by default:

  • Today
  • Yesterday
  • This Week
  • Last Week
  • Last 7 Days
  • This Month
  • Last Month
  • This Year
  • Last Year

You can disable these by setting showInternalPresets={false}.

For more customization, refer to the component source and adjust as needed

Introduction