Date picker

Neutral

Preview

index.tsx

Accent

Preview

index.tsx

Readonly

Preview

index.tsx

Disabled

Preview

index.tsx

Options

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

This is a required field

Floating label

Preview

index.tsx

Select date

Preview

index.tsx

This is a required field

Sizes

Preview

index.tsx

Preview

index.tsx

Controlled

With enable time

Preview

index.tsx

With select

Preview

index.tsx

Alternative

Neutral

Preview

index.tsx

Accent

Preview

index.tsx

Readonly

Preview

index.tsx

Disabled

Preview

index.tsx

Options

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

This is a required field

Floating label

Preview

index.tsx

Select dateThis is a required field

Sizes

Preview

index.tsx

Preview

index.tsx

Design Tokens for DatePicker

Token	Color for	State/Meaning
--par-color-text-datepicker-days-today-neutral-enabled	Day text (today, neutral)	Today, enabled (neutral)
--par-color-text-datepicker-days-today-neutral-hovered	Day text (today, neutral)	Today, hovered (neutral)
--par-color-text-datepicker-days-today-neutral-active	Day text (today, neutral)	Today, active (neutral)
--par-color-text-datepicker-days-today-accent-enabled	Day text (today, accent)	Today, enabled (accent)
--par-color-text-datepicker-days-today-accent-hovered	Day text (today, accent)	Today, hovered (accent)
--par-color-text-datepicker-days-today-accent-active	Day text (today, accent)	Today, active (accent)
--par-color-text-datepicker-days-normal-enabled	Day text (normal)	Normal, enabled
--par-color-text-datepicker-days-normal-neutral-hovered	Day text (normal, neutral)	Normal, hovered (neutral)
--par-color-text-datepicker-days-normal-accent-hovered	Day text (normal, accent)	Normal, hovered (accent)
--par-color-text-datepicker-days-normal-neutral-active	Day text (normal, neutral)	Normal, active (neutral)
--par-color-text-datepicker-days-normal-accent-active	Day text (normal, accent)	Normal, active (accent)
--par-color-text-datepicker-days-normal-disabled	Day text (normal)	Disabled
--par-color-text-datepicker-days-normal-drag-neutral	Day text (drag, neutral)	Drag selection (neutral)
--par-color-text-datepicker-days-normal-drag-accent	Day text (drag, accent)	Drag selection (accent)
--par-color-text-datepicker-days-today-drag-neutral	Day text (today, drag, neutral)	Today, drag (neutral)
--par-color-text-datepicker-days-today-drag-accent	Day text (today, drag, accent)	Today, drag (accent)
--par-color-text-datepicker-time	Time text	Time picker text
--par-color-text-datepicker-caret-enabled	Caret icon	Caret enabled
--par-color-text-datepicker-caret-hovered	Caret icon	Caret hovered
--par-color-text-datepicker-caret-disabled	Caret icon	Caret disabled
--par-color-bg-datepicker-days-neutral-enabled	Day background (neutral)	Enabled
--par-color-bg-datepicker-days-neutral-hovered	Day background (neutral)	Hovered
--par-color-bg-datepicker-days-neutral-active	Day background (neutral)	Active
--par-color-bg-datepicker-days-neutral-disabled	Day background (neutral)	Disabled
--par-color-bg-datepicker-days-accent-enabled	Day background (accent)	Enabled
--par-color-bg-datepicker-days-accent-hovered	Day background (accent)	Hovered
--par-color-bg-datepicker-days-accent-active	Day background (accent)	Active
--par-color-bg-datepicker-days-accent-disabled	Day background (accent)	Disabled
--par-color-bg-datepicker-days-drag-neutral	Day background (drag, neutral)	Drag selection (neutral)
--par-color-bg-datepicker-days-drag-accent	Day background (drag, accent)	Drag selection (accent)
--par-color-bg-datepicker-month-select-dropdown-enabled	Month select dropdown	Enabled
--par-color-bg-datepicker-month-select-dropdown-hovered	Month select dropdown	Hovered
--par-color-bg-datepicker	DatePicker background	Main background
--par-color-border-datepicker	DatePicker border	Main border
--par-color-border-datepicker-month-select-list	Month select list border	Border for month select list

DatePicker API Reference

`<DatePicker />`

Prop	Type	Default	Description
floatingLabel	ReactNode		Floating label inside the input
wrapperProps	object		Props for input container
color	'neutral' \| 'accent'	'neutral'	Theme color
icon	ReactNode		Icon inside the input
sideIcon	'left' \| 'right'	'right'	Position of secondary icon
locale	string	'default'	Locale for the DatePicker
calenderHeader	ReactNode		Custom component at top of calendar
options	object		Flatpickr options (see Flatpickr docs)
onFocus	function (event)		Callback on input focus
onBlur	function (event)		Callback on input blur
onInputChange	function (event, flatPickrInstance)		Callback on input change (allowInput = true)
isError	boolean	false	Error state
errorMessage	string		Error message
theme	string	'default'	Theme
inputSize	'sm' \| 'md'	'md'	Input size
...InputProps	See Input		Inherits all props from Input
...FlatpickrProps	See Flatpickr		Inherits all Flatpickr options

Note: DatePicker inherits all props from Input and Flatpickr. See Input documentation and Flatpickr options for full details.