Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    DateRangePicker

    A date range typed into start and end segments or picked with preset ranges and a two-month calendar.

    Storybook
    Storybook
    Source
    Source

    Installation

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

    DateRangePicker is in the @bigbang/ui package.

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

    <DateRangePicker label="Period" name="period" value={range} onValueChange={setRange} maxRangeDays={90} apply="confirm" />;

    presetRange(preset, today) returns a preset’s dates; use it to compute the same period on the server.

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label; it names both date groups 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. Reversed, too long and out-of-range ranges 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 range is required: the label is marked and the segments report aria-required.
    Type
    boolean
    Default
    false
    value
    Description
    The range when you control it, or null while empty. Pass it with onValueChange. Dates are CalendarDate, never JS Date.
    Type
    DateRange | null
    defaultValue
    Description
    Initial range when the field is uncontrolled.
    Type
    DateRange
    onValueChange
    Description
    Called with the range once both dates are complete and in order, or with null when one is cleared.
    Type
    (value: DateRange | 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
    maxRangeDays
    Description
    Longest allowed range in days, counting both ends. A longer range shows a message and longer presets are disabled.
    Type
    number
    presets
    Description
    Quick ranges beside the calendar. false hides them; an array picks and orders them.
    Type
    boolean | readonly DateRangePreset[]
    Default
    true
    apply
    Description
    instant applies a range as soon as it is picked; confirm adds Apply and Cancel buttons.
    Type
    'instant' | 'confirm'
    Default
    'instant'
    size
    Description
    Field height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    The range 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 range as an ISO 8601 interval, YYYY-MM-DD/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-range-picker": on the root element.
    • data-part: label, box, segments, trigger, popup, presets, calendar, grid, footer, description, error.
    • On a day button: data-selected (ends) and data-in-range (days between and the preview).