DateRangePicker

Shared Components

Date range selector with native date inputs and preset ranges.

Custom date inputsFive relative presets

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

date-range-picker.tsx

"use client";

import {
  DateRangePicker,
  type DateRange,
} from "@dashboardpack/core/components/shared/date-range-picker";
import { useState } from "react";

export default function DateRangePickerExample() {
  const [range, setRange] = useState<DateRange>({
    from: new Date(2026, 9, 1),
    to: new Date(2026, 9, 7),
  });
  return (
    <div className="space-y-4">
      <DateRangePicker value={range} onChange={setRange} />
      <p className="text-xs text-muted-foreground">
        Choose a preset or enter a custom range.
      </p>
    </div>
  );
}

Usage

Pass a complete range with from and to Dates. This picker uses native date inputs and relative presets, not a dual-calendar view. Presets calculate relative to the current date when selected.

Import

import {
  DateRangePicker,
  type DateRange,
} from "@dashboardpack/core/components/shared/date-range-picker";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

DateRangePicker props
Prop	Type / Default	Description
value	`DateRange: { from: Date; to: Date }` Default: required	Current complete date range.
onChange	`(range: DateRange) => void` Default: required	Receives a valid range.
className	`string` Default: —	Extend trigger styles.

Build with these too

Date Picker Calendar