Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    DatePicker

    A date field typed into day, month and year segments or picked from a calendar popup.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { DatePicker } from '@bigbang/ui';
    Source
    DatePicker.tsx
    Storybook
    DatePicker · Playground

    DatePicker is in the @bigbang/ui package.

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

    <DatePicker label="Date" name="date" value={date} onValueChange={setDate} min={parseDate('2026-01-01')} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label; it names the date segments and the calendar.
    Type
    string
    description
    Description
    Help text under the field, linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is invalid and the message is read with it. Dates outside min and max get a built-in message without it.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message.
    Type
    boolean
    Default
    false
    required
    Description
    The date is required: the label is marked and the segments report aria-required.
    Type
    boolean
    Default
    false
    value
    Description
    Selected date when you control it, or null while empty. Pass it with onValueChange. Dates are CalendarDate, never JS Date.
    Type
    CalendarDate | null
    defaultValue
    Description
    Initial date when the field is uncontrolled.
    Type
    CalendarDate
    onValueChange
    Description
    Called with the date once day, month and year are all set, or with null when the user clears one.
    Type
    (value: CalendarDate | null) => void
    min
    Description
    Earliest date. Earlier days are disabled in the calendar; a typed earlier date shows a message.
    Type
    CalendarDate
    max
    Description
    Latest date. Later days are disabled in the calendar; a typed later date shows a message.
    Type
    CalendarDate
    isDateUnavailable
    Description
    Return true for days that cannot be chosen, such as holidays.
    Type
    (date: CalendarDate) => boolean
    dayStatus
    Description
    A small status dot under a day in the calendar, read with the day's name.
    Type
    (date: CalendarDate) => DayStatus
    size
    Description
    Field height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    The date can be read but not changed; the calendar does not open.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the segments, the calendar button and the label.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; the form receives the date as YYYY-MM-DD.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="date-picker": on the root element.
    • data-part: label, box, segments, trigger, popup, calendar, grid, description, error.
    • On a segment: data-segment (day, month, year) and data-placeholder while empty.