Docs
Date Range Dropdown
Date Range Dropdown
A dropdown for selecting a date range.
Selected: Last 30 days from 9/14/2025 to 10/14/2025
Installation
Usage
import { DateRangeDropdown } from "@/components/ui/date-range-dropdown";<DateRangeDropdown
dateRangeOption={dateRangeOption}
setDateRangeOption={setDateRangeOption}
options={presets}
fromDate={new Date(2023, 0, 1)} // Optional minimum date
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
dateRangeOption | DateRangeOption | - | The currently selected date range option. |
setDateRangeOption | (option: DateRangeOption) => void | - | Function to update the selected date range. |
options | DateRangeOption[] | - | Available date range options to choose from. |
fromDate | Date | - | Optional minimum selectable date. |
className | string | - | The class name to apply to the component. |