Dropdown Range Date Picker

Configurable Dropdown Range Picker

Selected Range: None

Installation

Usage

import { DropdownRangeDatePicker } from "@/components/ruixen/dropdown-range-date-picker";
import { useState } from "react";
 
export default function App() {
  const [range, setRange] = useState<{ from?: Date; to?: Date }>();
 
  return (
    <DropdownRangeDatePicker
      selectedRange={range}
      onChange={setRange}
      minYear={2000}
      maxYear={2030}
      monthFormat="MMM"
      label="Select date range"
      clearable
    />
  );
}

Props

Prop	Type	Default	Description
`selectedRange`	`{ from?: Date; to?: Date }`	-	Selected date range
`onChange`	`(range: { from?: Date; to?: Date } \| undefined) => void`	-	Callback when range changes
`minYear`	`number`	`1900`	Minimum selectable year
`maxYear`	`number`	`current + 10`	Maximum selectable year
`monthFormat`	`string`	`"MMMM"`	Month dropdown format
`label`	`string`	`"Pick a date range"`	Button label
`className`	`string`	-	Button CSS classes
`calendarClassName`	`string`	-	Calendar CSS classes
`dropdownClassName`	`string`	-	Popover CSS classes
`clearable`	`boolean`	`true`	Show clear button

Features

Popover Interface: Clean, non-intrusive date selection
Year/Month Dropdowns: Quick navigation to any period
Range Selection: Visual feedback for date ranges
Clear Function: Reset selection with one click
Apply Button: Confirm selection before closing
Compact Design: Minimal space usage in forms

Range Display

The button shows the selected range in a readable format:

// Single date selected
"April 15, 2024";
 
// Range selected
"April 15, 2024 - April 20, 2024";
 
// No selection
"Pick a date range";

Use Cases

Report Filtering: Select date ranges for reports
Booking Systems: Choose check-in/check-out dates
Analytics: Filter data by date range
Event Planning: Set event duration periods