DatePicker ​

A set of pickers for selecting dates, date ranges, or date and time. Smooth, intuitive interfaces make choosing and adjusting values quick and precise.

Date Picker ​

Selected: None

DateTime Picker ​

Selected: None

Date Range Picker ​

Selected: None

API Reference ​

Show types
typescript
import type { Dayjs } from 'dayjs'

// Shared props for both single date and range pickers
export interface CommonDatePickerProps {
  /** Preferred popover placement relative to the trigger. */
  placement?: DatePickerPlacement

  /** Display format used for the input text. */
  format?: string

  /** Visual style variant passed through to the input. */
  variant?: 'subtle' | 'ghost' | 'outline'

  /** Prevents manual typing while keeping the picker interactive. */
  readonly?: boolean

  /** Placeholder text shown when no value is selected. */
  placeholder?: string

  /** Additional classes applied to the trigger input. */
  inputClass?: string | Array<string> | Record<string, boolean>

  /** Allows users to type custom date text into the input. */
  allowCustom?: boolean

  /** Closes the popover after a value is picked. */
  autoClose?: boolean

  /** Disables the trigger input and calendar interactions. */
  disabled?: boolean

  /** Optional label forwarded to the trigger input. */
  label?: string

  /** Shows clear and quick-action controls when enabled. */
  clearable?: boolean
}

export interface DatePickerProps extends CommonDatePickerProps {
  /** Uncontrolled initial value for the picker. */
  value?: string

  /** Controlled value for the picker. */
  modelValue?: string
}

export interface DateRangePickerProps extends CommonDatePickerProps {
  /** Uncontrolled initial range value. */
  value?: string | string[]

  /** Controlled range value. */
  modelValue?: string | string[]
}

export type DatePickerEmits = {
  /** Fired when the picker value changes. */
  (event: 'update:modelValue', value: string): void

  /** Fired after the picker commits a normalized value. */
  (event: 'change', value: string): void
}

export type DatePickerPlacement =
  | 'top-start'
  | 'top-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'right-start'
  | 'right-end'
  | 'left-start'
  | 'left-end'

export type DatePickerViewMode = 'date' | 'month' | 'year'

export interface DatePickerDateObj {
  date: Dayjs
  key: string
  inMonth: boolean
  isToday: boolean
  isSelected: boolean
}
Prop Default Type
value
""
string

Uncontrolled initial value for the picker.

modelValue
""
string

Controlled value for the picker.

placement
"bottom-start"
DatePickerPlacement

Preferred popover placement relative to the trigger.

format
—
string

Display format used for the input text.

variant
"subtle"
"subtle" | "outline" | "ghost"

Visual style variant passed through to the input.

readonly
false
boolean

Prevents manual typing while keeping the picker interactive.

placeholder
"Select date"
string

Placeholder text shown when no value is selected.

inputClass
—
string | string[] | Record<string, boolean>

Additional classes applied to the trigger input.

allowCustom
true
boolean

Allows users to type custom date text into the input.

autoClose
true
boolean

Closes the popover after a value is picked.

disabled
false
boolean

Disables the trigger input and calendar interactions.

label
—
string

Optional label forwarded to the trigger input.

clearable
true
boolean

Shows clear and quick-action controls when enabled.

Slot Payload
target
{ togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; }

Custom trigger renderer for the date picker.

prefix
{ togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; }

Content rendered before the trigger input value.

suffix
{ togglePopover: () => void; isOpen: boolean; displayLabel: string; inputValue: string; }

Content rendered after the trigger input value.

Event Payload
update:modelValue
[value: string]

Fired when the model value changes.

change
[value: string]

Fired after the value is committed.

ComboboxDialog