DateRangePicker

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Preset ranges sit beside the calendar. Wide screens show two months, below 1024 px one month.

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>
  );
}

Confirmed apply

apply="confirm" adds Apply and Cancel buttons; maxRangeDays blocks long ranges and long presets.

Date range

Start dateEnd date

DD/MM/YYYY

–

DD/MM/YYYY

LightDark

Copy code

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

export default function Confirm() {
  return (
    <Provider locale="en-GB">
      <DateRangePicker
        label="Date range"
        apply="confirm"
        maxRangeDays={31}
        min={parseDate('2026-01-01')}
        max={parseDate('2026-12-31')}
        className="max-w-sm"
      />
    </Provider>
  );
}

States

Filled, reversed and too long (built-in messages), required with an error, disabled.

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

Date range

Start dateEnd date

15/10/2026

–

01/10/2026

The end date cannot be before the start

Date range

Start dateEnd date

01/09/2026

–

28/10/2026

The range can be at most 31 days

Date range* required

Start dateEnd date

DD/MM/YYYY

–

DD/MM/YYYY

Choose a range.

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

LightDark

Copy code

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

const range = (start: string, end: string) => ({ start: parseDate(start), end: parseDate(end) });

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <DateRangePicker label="Date range" defaultValue={range('2026-10-01', '2026-10-15')} />
        <DateRangePicker label="Date range" defaultValue={range('2026-10-15', '2026-10-01')} />
        <DateRangePicker label="Date range" defaultValue={range('2026-09-01', '2026-10-28')} maxRangeDays={31} />
        <DateRangePicker label="Date range" error="Choose a range." required />
        <DateRangePicker label="Date range" defaultValue={range('2026-10-01', '2026-10-15')} disabled />
      </div>
    </Provider>
  );
}

Controlled

The value is { start, end } or null; the presets array picks and orders the presets.

Date range

Start dateEnd date

01/10/2026

–

28/10/2026

2026-10-01 – 2026-10-28

LightDark

Copy code

import { DateRangePicker, Provider, parseDate, type DateRange } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [value, setValue] = useState<DateRange | null>(() => ({ start: parseDate('2026-10-01'), end: parseDate('2026-10-28') }));
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-sm">
        <DateRangePicker label="Date range" value={value} onValueChange={setValue} presets={['last7Days', 'thisMonth', 'lastMonth']} />
        <output className="type-body-sm text-fg-subtle tabular-nums">{value ? `${value.start.toString()} – ${value.end.toString()}` : '—'}</output>
      </div>
    </Provider>
  );
}

Light and dark mode

Range ends take the primary fill, days between take the selected surface.

Light

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

Date range

Start dateEnd date

15/10/2026

–

01/10/2026

The end date cannot be before the start

Date range

Start dateEnd date

01/09/2026

–

28/10/2026

The range can be at most 31 days

Date range* required

Start dateEnd date

DD/MM/YYYY

–

DD/MM/YYYY

Choose a range.

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

Dark

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

Date range

Start dateEnd date

15/10/2026

–

01/10/2026

The end date cannot be before the start

Date range

Start dateEnd date

01/09/2026

–

28/10/2026

The range can be at most 31 days

Date range* required

Start dateEnd date

DD/MM/YYYY

–

DD/MM/YYYY

Choose a range.

Date range

Start dateEnd date

01/10/2026

–

15/10/2026

Copy code

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

const range = (start: string, end: string) => ({ start: parseDate(start), end: parseDate(end) });

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <DateRangePicker label="Date range" defaultValue={range('2026-10-01', '2026-10-15')} />
        <DateRangePicker label="Date range" defaultValue={range('2026-10-15', '2026-10-01')} />
        <DateRangePicker label="Date range" defaultValue={range('2026-09-01', '2026-10-28')} maxRangeDays={31} />
        <DateRangePicker label="Date range" error="Choose a range." required />
        <DateRangePicker label="Date range" defaultValue={range('2026-10-01', '2026-10-15')} disabled />
      </div>
    </Provider>
  );
}