DatePicker

When to use

DatePicker is for a single date in a form: a start date, a due date, a birth date. Users can type the date or pick it from the calendar.

When not to use

• For a range: use DateRangePicker.
• For a calendar that stays open on the page: use Calendar.
• For a time: use TimeField.

Anatomy

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

1. Label: Names the group of segments.
2. Segments: Day, month, year; placeholders while empty (DD, MM, YYYY).
3. Calendar button: Opens the calendar popup.
4. Calendar popup: The same grid as Calendar.
5. Description and error: Under the field.

Behaviour

• Typing digits fills a segment; when it is full, focus moves on. Typing a separator moves on too.
• Arrows step a segment up and down and wrap at the ends. Backspace clears a segment and goes back from an empty one.
• A day past the month’s last day is moved to the last day (31/02 → 28/02).
• A typed date outside min, max or isDateUnavailable shows a built-in message.
• Picking a day closes the popup and returns focus to the calendar button.

Guidelines

• Do not explain the format in the description; the placeholders show it.
• For far dates such as birth dates users type; the calendar is optional.
• State limits in text too.

Content

Turkish	English
Takvimi aç	Open calendar
GG / AA / YYYY	DD / MM / YYYY
{min} ile {max} arasında bir tarih seçin	Choose a date from {min} to {max}
Bu tarih seçilemez	This date is not available

Related components

• Calendar: A calendar that stays open.
• DateRangePicker: A date range.
• TimeField: A time.