DatePickerProps

Props of DatePicker

Properties

className?

optional className: string

Additional CSS class names for outer container.

---

date?

optional date: string

Current date value in ISO UTC string format.

---

disabled?

optional disabled: boolean

Whether to disable user input — no open interaction possible.

---

enableTime?

optional enableTime: boolean

Whether to enable time selection in addition to date selection.

---

inputId?

optional inputId: string

Identifier of the internal input element.

---

label?

optional label: string

Text label displayed above the date picker.

---

onDateValueChange()?

optional onDateValueChange: (date?) => void

Triggered whenever the date value changes.

Parameters

date?

Date

object representing the selected date.

Returns

void

---

onOpenChange()?

optional onOpenChange: (isOpen) => void

Called whenever the calendar popover is opened or closed.

Parameters

isOpen

boolean

Whether the popover is currently open.

Returns

void

---

onTimeValueChange()?

optional onTimeValueChange: (v) => void

Triggered whenever the time value (hours/minutes) changes.

Parameters

v

Time

Returns

void

---

readOnly?

optional readOnly: boolean

Whether to make the picker read-only.

---

ref?

optional ref: RefObject<WithOpen>

Ref to control the picker from parent components. Provides an open() method to manually open the date picker.

---

shouldLabelAnimate?

optional shouldLabelAnimate: boolean

Whether to animate the label upwards when focused or filled.

---

skipAnimationOnce?

optional skipAnimationOnce: boolean

Whether to skip label animation on the first render.

---

variant?

optional variant: null | "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "icon" | "float" | "fullRounded"

Visual style variant of the picker button.