DateRangePicker

When to use

DateRangePicker is for places that need a start and an end date: a report period, a list filter, a leave period.

When not to use

• For one date: use DatePicker.
• For two independent dates: if the dates are not tied, two DatePickers are clearer.

Anatomy

Date range

Start dateEnd date

DD/MM/YYYY

–

DD/MM/YYYY

Type the start and end days, or pick them from the calendar.

LightDark

Copy code

import { DateRangePicker, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <DateRangePicker label="Date range" description="Type the start and end days, or pick them from the calendar." className="max-w-sm" />
    </Provider>
  );
}

1. Label: Names both segment groups together.
2. Start and end segments: With a decorative dash between them.
3. Calendar button: Opens the popup.
4. Preset ranges: Today, Yesterday, Last 7 days, This month, Last month, This year, Custom range.
5. Calendar: Two months from 1024 px, one below.
6. Footer: Only with apply="confirm"; Cancel and Apply.

Behaviour

• In the calendar the first click anchors one end; the pointer or keyboard focus previews the other; the second click closes the range. Picking backwards swaps the ends.
• In instant mode a range picked in the calendar applies at once and the popup closes. A preset also applies at once but the popup stays open, because arrow keys select as they move in a radio group.
• In confirm mode nothing changes until Apply.
• A second click past maxRangeDays starts a new range; longer presets are disabled.
• Typed ranges that are reversed, too long or outside min/max get a built-in message.

Guidelines

• Limit presets to periods users really pick; order them with the presets array.
• Today, This month and This year count up to today; they do not cover the future.
• If large ranges are slow in reports, limit them with maxRangeDays and state the limit in the description.

Content

Turkish	English
Başlangıç tarihi / Bitiş tarihi	Start date / End date
Hazır aralıklar	Preset ranges
Son 7 gün	Last 7 days
Özel aralık	Custom range
Uygula / Vazgeç	Apply / Cancel
Aralık en fazla {days} gün olabilir	The range can be at most {days} days
Bitiş tarihi başlangıçtan önce olamaz	The end date cannot be before the start

Related components

• DatePicker: One date.
• Calendar: A calendar that stays open.