DatePicker

A DatePicker lets users pick a date from a calendar popover. It supports single dates (the default), date ranges, and multiple-date selection, and renders the selected value using date-fns format tokens.

Usage

import { DatePicker } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [date, setDate] = useState<Date | null>(null);
  return (
    <DatePicker
      value={date ?? undefined}
      placeholder="dd/mm/yyyy"
      valueFormat="dd-MM-yyyy"
      onChange={(next) => setDate((next as Date | null) ?? null)}
    />
  );
}

Props

aria-label

Typestring

Accessible name for the trigger button.

aria-labelledby

Typestring

`aria-labelledby` for the trigger button.

className

Typestring

Class name applied to the trigger button.

defaultValue

TypeDate | [Date, Date] | Date[] | string

Initial value when the picker is uncontrolled. - `default` accepts `Date | string` - `range` accepts `[Date, Date]` - `multiple` accepts `Date[]`

disabled

Typeboolean

Disable the picker. The trigger button is not interactive and the popover cannot be opened.

error

Typeboolean

Defaultfalse

Render the trigger in an error state.

helperText

TypeReactNode

Message rendered under the trigger and announced with it.

id

Typestring

`id` attribute applied to the trigger button.

inputSize

TypeItemSize

Default'medium'

Size variant of the trigger input.

isRequired

Typeboolean

Adds the required marker next to the label.

label

TypeReactNode

Label rendered above the trigger and linked to it.

maxDate

TypeDate

The latest selectable date (inclusive).

minDate

TypeDate

The earliest selectable date (inclusive).

onChange

Type(value: Date | [Date, Date] | Date[] | null) => void

Callback fired when the selected value changes. - `default` -> the selected `Date` or `null` when cleared - `range` -> `[from, to]` once both dates are selected, otherwise `null` - `multiple`-> the array of selected `Date`s (empty array allowed)

placeholder

Typestring

Default'dd/mm/yyyy'

Placeholder text shown when no date is selected.

readOnly

Typeboolean

Render the picker as read-only. The trigger displays the current value but the popover cannot be opened.

state

TypeFieldState

Default'default'

Visual state of the control.

type

TypeDatePickerType

Default'default'

Picker type. - `default` selects a single date - `range` selects a `[from, to]` date range - `multiple` selects an arbitrary array of dates

value

TypeDate | [Date, Date] | Date[] | string

Controlled selected value. When set, the picker becomes controlled.

valueFormat

Typestring

Default'DD/MM/YYYY'

Format string used to render the selected date(s) in the trigger. **Note:** This implementation uses `date-fns` format tokens (e.g. `dd/MM/yyyy`). The legacy default value `DD/MM/YYYY` (dayjs tokens) is accepted and converted to the equivalent `date-fns` tokens for backwards compatibility.

CSS variables

Color

--wb-public-date-picker-dropdown-background

--wb-public-date-picker-dropdown-border-color

--wb-public-date-picker-dropdown-box-shadow

--wb-public-date-picker-color

--wb-public-date-picker-header-background

--wb-public-date-picker-date-header-color

--wb-public-date-picker-nav-color

--wb-public-date-picker-date-outside-color

--wb-public-date-picker-date-hover-background-color

--wb-public-date-picker-date-selected-background-color

--wb-public-date-picker-date-selected-color

--wb-public-date-picker-date-today-color