DatePicker

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

Live example, StorybookOpen in Storybook

Default

Segments follow the Provider language order (dd/mm/yyyy in English). The calendar button opens a month grid popup.

Date

DD/MM/YYYY

Type the day, month and year, or pick from the calendar.

LightDark

Copy code

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <DatePicker label="Date" description="Type the day, month and year, or pick from the calendar." className="max-w-xs" />
    </Provider>
  );
}

States

Filled, required with an error, out of range (built-in message), read-only and disabled.

Date

28/10/2026

Date* required

DD/MM/YYYY

Choose a date.

Date

05/01/2026

Choose a date on or after 1 February 2026

Date

28/10/2026

Date

28/10/2026

LightDark

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-xs flex-col gap-lg">
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} />
        <DatePicker label="Date" error="Choose a date." required />
        <DatePicker label="Date" defaultValue={parseDate('2026-01-05')} min={parseDate('2026-02-01')} />
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} readOnly />
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} disabled />
      </div>
    </Provider>
  );
}

Controlled

The value is a CalendarDate or null; the form receives YYYY-MM-DD.

Date

28/10/2026

2026-10-28

LightDark

Copy code

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

export default function Controlled() {
  const [value, setValue] = useState<CalendarDate | null>(() => parseDate('2026-10-28'));
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-xs flex-col gap-sm">
        <DatePicker label="Date" value={value} onValueChange={setValue} max={parseDate('2026-12-31')} />
        <output className="type-body-sm text-fg-subtle tabular-nums">{value?.toString() ?? '—'}</output>
      </div>
    </Provider>
  );
}

Light and dark mode

The focused segment takes the primary fill.

Light

Date

28/10/2026

Date* required

DD/MM/YYYY

Choose a date.

Date

05/01/2026

Choose a date on or after 1 February 2026

Date

28/10/2026

Date

28/10/2026

Dark

Date

28/10/2026

Date* required

DD/MM/YYYY

Choose a date.

Date

05/01/2026

Choose a date on or after 1 February 2026

Date

28/10/2026

Date

28/10/2026

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-xs flex-col gap-lg">
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} />
        <DatePicker label="Date" error="Choose a date." required />
        <DatePicker label="Date" defaultValue={parseDate('2026-01-05')} min={parseDate('2026-02-01')} />
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} readOnly />
        <DatePicker label="Date" defaultValue={parseDate('2026-10-28')} disabled />
      </div>
    </Provider>
  );
}