Default

Basic date range picker without a label.

Booking Period

Hotel or rental booking with labeled date range selection.

Report Range

Select the time period for generating analytics reports.

Travel Dates

Flight or trip planning with departure and return dates.

Project Timeline

Define the start and end dates for a project milestone.

Event Scheduling

Schedule a multi-day event or conference.

Usage

<DateRangePicker placeholder="Select date range" /><DateRangePicker label="Booking Period" placeholder="Choose dates" />

Props

PropTypeDefaultDescription
placeholdertext"Select range"Placeholder text for both date fields
labeltext""Label text above the date range picker