DatePicker

Component for selecting a date with customizable format and placeholder

function DatePickerExample() {
  const today = new Date();
  const inThreeDays = new Date(new Date().setDate(new Date().getDate() + 3));

  return <DatePicker type="range" defaultValue={[today, inThreeDays]} />;
}

Props

defaultValue

TypeDatePickerProps['defaultValue']

Default date value when the component is initially rendered. For the "default" is a single date, for the "range" [date, date]; and for the "multiple", an array of dates.

error

Typeboolean

Defaultfalse

Whether the date picker has an error

inputSize

TypeItemSize

Default'medium'

placeholder

Typestring

Default'dd/mm/yyyy'

Placeholder text to show when no date is selected

type

TypeDatePickerType

Default'default'

Picker type

value

TypeDatePickerProps['value']

Controlled value for the selected date For the "default" is a single date, for the "range" [date, date]; and for the "multiple", an array of dates.

valueFormat

Typestring

Default'DD/MM/YYYY'

Format string to control how the selected date is displayed (e.g., 'yyyy-MM-dd')

CSS Variables

Size

--ax-public-date-picker-border-size

Color

--ax-public-date-picker-color

--ax-public-date-picker-date-header-color

--ax-public-date-picker-date-outside-color

--ax-public-date-picker-date-selected-background-color

--ax-public-date-picker-date-selected-color

--ax-public-date-picker-dropdown-background

--ax-public-date-picker-dropdown-border-color

--ax-public-date-picker-header-background

Shadow

--ax-public-date-picker-dropdown-box-shadow