Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    DateTimePicker

    A field group that chooses a date and a time together: a DatePicker and a TimeField.

    Storybook
    Storybook
    Source
    Source

    Installation

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

    DateTimePicker is in the @bigbang/ui package. The CalendarDateTime value type and parseDateTime are exported from the same package.

    import { DateTimePicker, type CalendarDateTime } from '@bigbang/ui';
    

    <DateTimePicker label="Send time" name="sendAt" minDate={today} value={value} onValueChange={setValue} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    Name of the whole field, shown as the legend of the group.
    Type
    string
    description
    Description
    Help text under both parts, linked to the group with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, both parts are marked invalid and the message is read with the group.
    Type
    string
    invalid
    Description
    Marks both parts invalid without a message.
    Type
    boolean
    Default
    false
    required
    Description
    A date and a time are required; both labels get *.
    Type
    boolean
    Default
    false
    value
    Description
    Controlled value. Pass it with onValueChange.
    Type
    CalendarDateTime | null
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    CalendarDateTime
    onValueChange
    Description
    Called with the date and time once both are complete, or null when either is cleared.
    Type
    (value: CalendarDateTime | null) => void
    minDate
    Description
    Earliest day that can be chosen.
    Type
    CalendarDate
    maxDate
    Description
    Latest day that can be chosen.
    Type
    CalendarDate
    isDateUnavailable
    Description
    Days that cannot be chosen inside the range.
    Type
    (date: CalendarDate) => boolean
    withSeconds
    Description
    Adds a seconds segment to the time.
    Type
    boolean
    Default
    false
    dateLabel
    Description
    Label of the date part. Without it, ui.date-time-picker.date ("Tarih" or "Date").
    Type
    string
    timeLabel
    Description
    Label of the time part. Without it, ui.date-time-picker.time ("Saat" or "Time").
    Type
    string
    size
    Description
    Height of both parts: 32, 36 and 40 px, as DatePicker and TimeField.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    Shows the value but does not change it.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables both parts.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; a hidden input submits the value as YYYY-MM-DDTHH:mm, with seconds when shown.
    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-time-picker", and data-invalid on error: on the fieldset.
    • data-part: legend, row, description, error.