DateRangePicker Component Demo

An improved date range picker with quick presets, better visual design, and enhanced user experience.

Interactive Demo

DateRangePicker

Selected Values

Start Date:

Not selected

End Date:

Not selected

Formatted Display:

No date range selected

Features

Quick Presets

Predefined date ranges like "Today", "Last 7 days", "This month" for quick selection.

Custom Range

Custom date and time selection with validation and visual feedback.

Visual Feedback

Clear visual indicators for selected dates, validation errors, and current state.

Validation

Real-time validation to ensure start date is before end date with helpful error messages.

Easy Clear

One-click clear functionality with visual indicators when dates are selected.

Responsive Design

Fully responsive design that works well on desktop, tablet, and mobile devices.

Usage Example

import DateRangePicker from '../../components/ui/DateRangePicker';

const MyComponent = () => {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  return (
    <DateRangePicker
      startDate={startDate}
      endDate={endDate}
      onStartDateChange={setStartDate}
      onEndDateChange={setEndDate}
      onClear={() => {
        setStartDate('');
        setEndDate('');
      }}
    />
  );
};