Date Picker

A neo-brutalist style date picker component family built on v-calendar and reka-ui Popover. It provides 7 ready-to-use pickers plus standalone panels and a reusable footer. Popup pickers share trigger style variants, while TimePicker uses its own layout of time dropdowns.

Demo

Preview

DatePicker 单日期选择

未选择

DatePickerRange 日期范围

DateTimePicker 日期时间

TimePicker 纯时间

时

:

分

:

秒

WeekPicker 周选择

MonthPicker 月份

YearPicker 年份

程序化控制（通过 ref 打开面板）

通过 pickerRef.open 可在外部按钮中打开或关闭日期面板。

Installation

pnpm dlx brutx-vue@latest add date-picker

Additional dependency required:

pnpm add v-calendar

Usage

DatePicker - Single Date Selection

<script setup>
import { ref } from 'vue'
import { DatePicker } from 'brutx-ui-vue/date-picker'

const date = ref(null)
</script>

<template>
    <DatePicker v-model="date" placeholder="Select date" />
</template>

With Shortcuts

<script setup>
import { ref } from 'vue'
import { DatePicker } from 'brutx-ui-vue/date-picker'

const date = ref(null)

const shortcuts = [
    { label: 'Today', value: () => new Date() },
    { label: 'Tomorrow', value: () => {
        const d = new Date()
        d.setDate(d.getDate() + 1)
        return d
    }},
    { label: 'In a week', value: () => {
        const d = new Date()
        d.setDate(d.getDate() + 7)
        return d
    }},
]
</script>

<template>
    <DatePicker v-model="date" :shortcuts="shortcuts" :clearable="true" />
</template>

DatePickerRange - Date Range Selection

<script setup>
import { ref } from 'vue'
import { DatePickerRange } from 'brutx-ui-vue/date-picker'

const dateRange = ref(null)
</script>

<template>
    <DatePickerRange
        v-model="dateRange"
        start-placeholder="Start date"
        end-placeholder="End date"
    />
</template>

DateTimePicker - Date Time Selection

<script setup>
import { ref } from 'vue'
import { DateTimePicker } from 'brutx-ui-vue/date-picker'

const dateTime = ref(null)
</script>

<template>
    <DateTimePicker
        v-model="dateTime"
        placeholder="Select date and time"
        :show-seconds="true"
    />
</template>

DateTimePicker supports time step configuration:

<template>
    <DateTimePicker
        v-model="dateTime"
        :time-step="{ hour: 2, minute: 15, second: 10 }"
    />
</template>

TimePicker - Time Only Selection

TimePicker combines Select components for hours, minutes, and optional seconds, configured through disabled, showSeconds, timeStep, embedded, and ariaLabel. The popup date-picker props open, readonly, clearable, size, variant, shortcuts, minDate, maxDate, and displayFormat are not part of its public props.

<script setup>
import { ref } from 'vue'
import { TimePicker } from 'brutx-ui-vue/date-picker'

const time = ref(null)
</script>

<template>
    <TimePicker v-model="time" :show-seconds="true" />
</template>

WeekPicker - Week Selection

<script setup>
import { ref } from 'vue'
import { WeekPicker } from 'brutx-ui-vue/date-picker'

const week = ref(null)
</script>

<template>
    <WeekPicker v-model="week" :week-starts-on="1" placeholder="Select week" />
</template>

weekStartsOn: 0 = week starts on Sunday, 1 = week starts on Monday (default). After selecting any date, modelValue automatically aligns to the start of that week, and the entire week is highlighted.

Note: The weekStartsOn default (1, Monday) is not derived from the useLocale regional setting — a known limitation. ISO 8601 and Chinese regional conventions both start weeks on Monday; if your business needs Sunday as the week start (e.g. en-US convention), pass weekStartsOn: 0 explicitly.

MonthPicker - Month Selection

<script setup>
import { ref } from 'vue'
import { MonthPicker } from 'brutx-ui-vue/date-picker'

const month = ref(null)
</script>

<template>
    <MonthPicker v-model="month" placeholder="Select month" />
</template>

YearPicker - Year Selection

<script setup>
import { ref } from 'vue'
import { YearPicker } from 'brutx-ui-vue/date-picker'

const year = ref(null)
</script>

<template>
    <YearPicker v-model="year" placeholder="Select year" />
</template>

Disabled and Read-only

<template>
    <DatePicker v-model="date" disabled />
    <DatePicker v-model="date" readonly />
</template>

Date Range Constraints

<script setup>
import { ref } from 'vue'
import { DatePicker } from 'brutx-ui-vue/date-picker'

const date = ref(null)
const minDate = new Date(2026, 0, 1)
const maxDate = new Date(2026, 11, 31)
</script>

<template>
    <DatePicker v-model="date" :min-date="minDate" :max-date="maxDate" />
</template>

Custom Display Format

Supports YYYY, YY, MM, DD, HH, mm, ss, WW (ISO week number) tokens:

<template>
    <DatePicker v-model="date" display-format="YYYY/MM/DD" />
    <DateTimePicker v-model="dt" display-format="YYYY-MM-DD HH:mm:ss" />
    <WeekPicker v-model="week" display-format="YYYY-WW" />
    <YearPicker v-model="year" display-format="YY" />
</template>

displayFormat only affects the string shown in the input. It does not change the types of modelValue, minDate, maxDate, shortcuts, or emitted payloads; those public APIs always use Date, [Date, Date], or null. For cross-time-zone datetime consistency, normalize values in your application as Date, timestamps, or full ISO strings with explicit offsets before converting them to Date; do not rely on native parsing of arbitrary date strings.

Sub-components

Component	Purpose
DatePicker	Single date selection
DatePickerRange	Date range selection (start and end dates)
DateTimePicker	Date + time selection
TimePicker	Time only selection (hours/minutes/seconds)
WeekPicker	Week selection (full week highlight)
MonthPicker	Month selection
YearPicker	Year selection
DatePickerPanel	Embeddable single-date panel
DatePickerRangePanel	Embeddable date-range panel
DateTimePickerPanel	Datetime panel combining a calendar and TimePicker
WeekPickerPanel	Week panel aligning selection to the week start
MonthPickerPanel	Month grid with year navigation
YearPickerPanel	Year grid with configurable years per page
DatePickerPanelFooter	Reusable Clear and Confirm buttons and their events

Data Types

// Single date shortcut
interface DatePickerShortcut {
    label: string
    value: Date | (() => Date)
}

// Date range in start/end order
type DateRange = readonly [Date, Date]

// Date range shortcut
interface DatePickerRangeShortcut {
    label: string
    value: DateRange | (() => DateRange)
}

Composables

The logic for popup panel triggering, display formatting, clearing, and confirmation in components like DatePicker has been extracted into a standalone useDatePicker composable. It can be used independently when you need to build a fully custom trigger or calendar panel. It manages the panel open/close state, synchronizes the display value with modelValue, and triggers open / close / change / update:modelValue events through the provided emit.

import { useDatePicker } from 'brutx-ui-vue/useDatePicker'
import type { UseDatePickerOptions } from 'brutx-ui-vue/useDatePicker'

const props = defineProps<{ modelValue?: Date | null }>()

const emit = defineEmits<{
    'update:modelValue': [value: Date | null]
    'change': [value: Date | null]
    'open': []
    'close': []
}>()

const {
    open,                  // Whether the panel is open
    displayValue,          // Current displayed value in the panel (temporary value before confirmation)
    formattedDisplay,      // Formatted display string
    handlePanelUpdate,     // Panel value update callback
    handlePanelConfirm,    // Panel confirm callback
    handlePanelClear,      // Panel clear callback
    handleClearClick,      // Trigger clear button click callback
    handleTriggerKeydown,  // Trigger keyboard event callback
} = useDatePicker({
    modelValue: () => props.modelValue ?? null,
    displayFormat: 'YYYY-MM-DD',
    disabled: false,
    readonly: false,
    emit,
})

UseDatePickerOptions

Prop	Type	Default	Description
modelValue	MaybeRefOrGetter<Date | null>	null	Currently selected date (supports v-model)
displayFormat	MaybeRefOrGetter<string>	'YYYY-MM-DD'	Display format (supports YYYY, YY, MM, DD, HH, mm, ss, WW tokens)
disabled	MaybeRefOrGetter<boolean>	false	Whether disabled
readonly	MaybeRefOrGetter<boolean>	false	Prevents opening the panel internally
openProp	MaybeRefOrGetter<boolean | undefined>	undefined	Controlled open state; omitted values use internal state
emitUpdateOpen	(value: boolean) => void	—	Called on open-state requests to synchronize controlled state with openProp
emit	DatePickerEmit	—	Event emission function (required, type consistent with component emits)

Return Values

Prop	Type	Description
open	Ref<boolean>	Whether the panel is open
displayValue	Readonly<Ref<Date | null>>	Current panel selection, read-only to the caller
formattedDisplay	ComputedRef<string>	Formatted string according to displayFormat
handlePanelUpdate(value)	(value: Date | null) => void	Called when the panel value updates, synchronizes displayValue and triggers update:modelValue
handlePanelConfirm(value)	(value: Date | null) => void	Called when the panel is confirmed, triggers update:modelValue / change and closes the panel
handlePanelClear()	() => void	Called when the panel is cleared, triggers update:modelValue(null) / change(null)
handleClearClick(event)	(event: Event) => void	Trigger clear callback, stops propagation and clears the value
handleTriggerKeydown(event)	(event: KeyboardEvent) => void	Prevents Enter / Space defaults when disabled or read-only; the trigger primitive handles ordinary opening

Note: emit must conform to the DatePickerEmit signature. Call the composable within setup() or a managed Vue effect scope so its reactive watchers are disposed of appropriately.

Programmatic Control

DatePicker, DateTimePicker, WeekPicker, MonthPicker, and YearPicker expose an open reactive ref via defineExpose, allowing parent components to programmatically open or close the date panel. open is a writable reference bound to the internal Popover. Controlled writes emit update:open and take effect when the parent updates open. readonly blocks requests to open the panel internally.

Note: DatePickerRange and TimePicker do not expose open. DatePicker, DateTimePicker, WeekPicker, MonthPicker, and YearPicker also support v-model:open two-way binding. Using v-model:open is recommended over directly manipulating the ref.

<script setup>
import { ref } from 'vue'
import { DatePicker } from 'brutx-ui-vue/date-picker'
import { Button } from 'brutx-ui-vue/button'

const pickerRef = ref()
const date = ref(null)
</script>

<template>
    <DatePicker ref="pickerRef" v-model="date" />

    <Button @click="pickerRef && (pickerRef.open = true)">Open Panel</Button>
    <Button @click="pickerRef && (pickerRef.open = false)">Close Panel</Button>
</template>

API Reference

DatePicker

DatePicker — Props

Name	Type	Default	Description
open	boolean | undefined	undefined Runtime fallback:When undefined, the component manages its own open state, initially closed.	The controlled panel open state. Use v-model:open to apply open-state requests emitted by the component.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Runtime fallback When undefined, the component manages its own open state, initially closed. Applied by the component under the documented runtime conditions. Source DatePicker.vue:19 packages/ui/src/components/date-picker/DatePicker.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value "default" Source DatePicker.vue:20 packages/ui/src/components/date-picker/DatePicker.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value "default" Source DatePicker.vue:21 packages/ui/src/components/date-picker/DatePicker.vue
modelValue Nullable	Date | null | undefined	null	The selected single date, bound with v-model. null represents an empty or cleared selection.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value null Source types.ts:26 packages/ui/src/components/date-picker/types.ts
placeholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”.	Placeholder text in the trigger when there is no date to display.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”. Applied by the component under the documented runtime conditions. Source types.ts:27 packages/ui/src/components/date-picker/types.ts
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Shortcut options in the date panel. Each supplies a label and a Date or function returning a Date; selected shortcuts must satisfy the date bounds.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value [] Source types.ts:28 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	"YYYY-MM-DD"	Formats the date text shown in the trigger using YYYY, YY, MM, DD, HH, mm, ss, and WW, while keeping the bound value as a Date. WW uses ISO week numbers; when the format contains weeks but no month or day tokens, the year is the ISO week year.
Details Declared type string | undefined Default value details Declaration 'YYYY-MM-DD' Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value "YYYY-MM-DD" Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The earliest selectable date passed to the calendar. Single-date shortcuts are compared by local calendar date, and values before this day are ignored.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The latest selectable date passed to the calendar. Single-date shortcuts are compared by local calendar date, and values after this day are ignored.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the trigger and hides its clear button. Pickers with a hidden form field also disable that field.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel footer with Clear and Confirm actions. The trigger also shows a clear button when it has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native form field name. When provided, a hidden field submits the date as YYYY-MM-DD, an empty string for an empty value, and nothing when disabled.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”.	The accessible name for the date trigger and date panel.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePicker.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

DatePicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when a date is selected, confirmed, or cleared, updating v-model. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue
@update:open	[value: boolean]	Emitted when the component requests an open-state update for v-model:open. In controlled mode, the parent must update open to change the displayed state.
Details Declared type [value: boolean] Literal values false true Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue
@change	[value: Date | null]	Emitted immediately on confirmation or clearing. On other closes, it is emitted only if the panel selection and the current modelValue have different timestamps.
Details Declared type [value: Date | null] Literal values null Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue

DatePicker — Exposes

Name	Signature or type	Description
open	Ref<boolean, boolean>	A writable reference to the panel open state. Assigning through the component instance requests opening or closing; readonly blocks opening requests. Controlled writes emit update:open and require the parent to update open.
Details Declared type Ref<boolean, boolean> Literal values false true Source DatePicker.vue packages/ui/src/components/date-picker/DatePicker.vue

DatePickerPanel

DatePickerPanel — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The currently selected date in the standalone panel, synchronized with the caller through v-model.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value null Source DatePickerPanel.vue:31 packages/ui/src/components/date-picker/DatePickerPanel.vue
minDate	Date | undefined	undefined	The earliest selectable date passed to the calendar. Single-date shortcuts are compared by local calendar date, and values before this day are ignored.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value undefined Source DatePickerPanel.vue:32 packages/ui/src/components/date-picker/DatePickerPanel.vue
maxDate	Date | undefined	undefined	The latest selectable date passed to the calendar. Single-date shortcuts are compared by local calendar date, and values after this day are ignored.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value undefined Source DatePickerPanel.vue:33 packages/ui/src/components/date-picker/DatePickerPanel.vue
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Labeled date shortcuts in the panel sidebar, supplied as Dates or functions returning Dates. Shortcut values outside the date bounds are ignored.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value [] Source DatePickerPanel.vue:34 packages/ui/src/components/date-picker/DatePickerPanel.vue
clearable	boolean | undefined	true	Shows the panel footer containing Clear and Confirm buttons. Turning it off hides both buttons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value true Source DatePickerPanel.vue:35 packages/ui/src/components/date-picker/DatePickerPanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”.	The accessible name of the date panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerPanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.placeholder, whose English text is “Pick a date”. Applied by the component under the documented runtime conditions. Source DatePickerPanel.vue:36 packages/ui/src/components/date-picker/DatePickerPanel.vue

DatePickerPanel — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when the panel selection changes. Clearing emits null; the parent must apply updates to keep the selected state synchronized.
Details Declared type [value: Date | null] Literal values null Source DatePickerPanel.vue packages/ui/src/components/date-picker/DatePickerPanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source DatePickerPanel.vue packages/ui/src/components/date-picker/DatePickerPanel.vue
@confirm	[value: Date | null]	Emitted when the panel Confirm button is clicked, carrying the current modelValue, including null when nothing is selected.
Details Declared type [value: Date | null] Literal values null Source DatePickerPanel.vue packages/ui/src/components/date-picker/DatePickerPanel.vue

DatePickerPanelFooter

DatePickerPanelFooter — Props

Name	Type	Default	Description
clearLabel	string | undefined	undefined Runtime fallback:When undefined, null, or empty, uses datePicker.clear, whose English text is “Clear”.	The text of the panel footer Clear button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerPanelFooter.vue Resolved value undefined Runtime fallback When undefined, null, or empty, uses datePicker.clear, whose English text is “Clear”. Applied by the component under the documented runtime conditions. Source DatePickerPanelFooter.vue:9 packages/ui/src/components/date-picker/DatePickerPanelFooter.vue
confirmLabel	string | undefined	undefined Runtime fallback:When undefined, null, or empty, uses datePicker.confirm, whose English text is “Confirm”.	The text of the panel footer Confirm button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerPanelFooter.vue Resolved value undefined Runtime fallback When undefined, null, or empty, uses datePicker.confirm, whose English text is “Confirm”. Applied by the component under the documented runtime conditions. Source DatePickerPanelFooter.vue:10 packages/ui/src/components/date-picker/DatePickerPanelFooter.vue
disabled	boolean | undefined	false	Disables both Clear and Confirm buttons, allowing asynchronous processing to block repeated user submissions.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePickerPanelFooter.vue Resolved value false Source DatePickerPanelFooter.vue:12 packages/ui/src/components/date-picker/DatePickerPanelFooter.vue

DatePickerPanelFooter — Events

Name	Signature or type	Description
@clear	[]	Emitted when the enabled Clear button is clicked. The caller implements the clearing behavior.
Details Declared type [] Source DatePickerPanelFooter.vue packages/ui/src/components/date-picker/DatePickerPanelFooter.vue
@confirm	[]	Emitted when the enabled Confirm button is clicked. The caller implements the confirmation behavior.
Details Declared type [] Source DatePickerPanelFooter.vue packages/ui/src/components/date-picker/DatePickerPanelFooter.vue

DatePickerRange

DatePickerRange — Props

Name	Type	Default	Description
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value "default" Source DatePickerRange.vue:18 packages/ui/src/components/date-picker/DatePickerRange.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value "default" Source DatePickerRange.vue:19 packages/ui/src/components/date-picker/DatePickerRange.vue
modelValue Nullable	DateRange | null | undefined	null	The current readonly tuple of start and end dates, bound with v-model. null represents an empty range.
Details Declared type DateRange | null | undefined Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Default value details Declaration null Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value null Source types.ts:48 packages/ui/src/components/date-picker/types.ts
startPlaceholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.startPlaceholder, whose English text is “Start date”.	Text shown in the start-date position when no complete date range is available.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.startPlaceholder, whose English text is “Start date”. Applied by the component under the documented runtime conditions. Source types.ts:49 packages/ui/src/components/date-picker/types.ts
endPlaceholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.endPlaceholder, whose English text is “End date”.	Text shown in the end-date position when no complete date range is available.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.endPlaceholder, whose English text is “End date”. Applied by the component under the documented runtime conditions. Source types.ts:50 packages/ui/src/components/date-picker/types.ts
separator	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.separator, whose English text is “to”.	Separator text displayed between the start and end dates or their placeholders.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.separator, whose English text is “to”. Applied by the component under the documented runtime conditions. Source types.ts:51 packages/ui/src/components/date-picker/types.ts
shortcuts	DatePickerRangeShortcut[] | undefined	[] Factory evaluated per instance	Date-range shortcuts containing a label and a start/end tuple or a function returning one. Selecting a shortcut directly updates the range.
Details Declared type DatePickerRangeShortcut[] | undefined Referenced types DatePickerRangeShortcut Type definition — DatePickerRangeShortcut export interface DatePickerRangeShortcut { label: string value: DateRange | (() => DateRange) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value [] Source types.ts:52 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	"YYYY-MM-DD"	Formats the start and end dates separately with YYYY, YY, MM, DD, HH, mm, ss, and WW, while preserving the DateRange value. WW follows ISO week-number and week-year rules.
Details Declared type string | undefined Default value details Declaration 'YYYY-MM-DD' Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value "YYYY-MM-DD" Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The earliest selectable date passed to the range calendar. Shortcut ranges are emitted directly, so the caller must supply shortcuts within the bounds.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The latest selectable date passed to the range calendar. Shortcut ranges are emitted directly, so the caller must supply shortcuts within the bounds.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the range trigger and hides its clear button.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel footer with Clear and Confirm actions. The trigger also shows a clear button when it has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native name attribute passed to the range trigger button. This component does not create a hidden field for submitting the date range.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.rangeLabel, whose English text is “Date range”.	The accessible name of the range trigger and panel, configured separately from placeholder text.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.rangeLabel, whose English text is “Date range”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRange.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

DatePickerRange — Events

Name	Signature or type	Description
@update:modelValue	[value: DateRange | null]	Emitted on calendar selection, range dragging, shortcut selection, confirmation, or clearing to update v-model, carrying a start/end tuple or null.
Details Declared type [value: DateRange | null] Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Source DatePickerRange.vue packages/ui/src/components/date-picker/DatePickerRange.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source DatePickerRange.vue packages/ui/src/components/date-picker/DatePickerRange.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source DatePickerRange.vue packages/ui/src/components/date-picker/DatePickerRange.vue
@change	[value: DateRange | null]	Emitted immediately when the range is confirmed or cleared. On other closes, it is emitted only if either panel endpoint differs in timestamp from the current modelValue.
Details Declared type [value: DateRange | null] Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Source DatePickerRange.vue packages/ui/src/components/date-picker/DatePickerRange.vue

DatePickerRangePanel

DatePickerRangePanel — Props

Name	Type	Default	Description
modelValue Nullable	DateRange | null | undefined	null	The readonly start/end tuple in the standalone range panel, synchronized with v-model. null represents an empty range.
Details Declared type DateRange | null | undefined Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Default value details Declaration null Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value null Source DatePickerRangePanel.vue:31 packages/ui/src/components/date-picker/DatePickerRangePanel.vue
minDate	Date | undefined	undefined	The earliest selectable date passed to the range calendar. Shortcut ranges are emitted directly, so the caller must supply shortcuts within the bounds.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value undefined Source DatePickerRangePanel.vue:32 packages/ui/src/components/date-picker/DatePickerRangePanel.vue
maxDate	Date | undefined	undefined	The latest selectable date passed to the range calendar. Shortcut ranges are emitted directly, so the caller must supply shortcuts within the bounds.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value undefined Source DatePickerRangePanel.vue:33 packages/ui/src/components/date-picker/DatePickerRangePanel.vue
shortcuts	DatePickerRangeShortcut[] | undefined	[] Factory evaluated per instance	Range shortcuts in the sidebar. Function values are resolved for display and evaluated again on selection, keeping the active highlight aligned with the emitted range.
Details Declared type DatePickerRangeShortcut[] | undefined Referenced types DatePickerRangeShortcut Type definition — DatePickerRangeShortcut export interface DatePickerRangeShortcut { label: string value: DateRange | (() => DateRange) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value [] Source DatePickerRangePanel.vue:34 packages/ui/src/components/date-picker/DatePickerRangePanel.vue
clearable	boolean | undefined	true	Shows the panel footer containing Clear and Confirm buttons. Turning it off hides both buttons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value true Source DatePickerRangePanel.vue:35 packages/ui/src/components/date-picker/DatePickerRangePanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.rangeLabel, whose English text is “Date range”.	The accessible name of the date-range panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DatePickerRangePanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.rangeLabel, whose English text is “Date range”. Applied by the component under the documented runtime conditions. Source DatePickerRangePanel.vue:36 packages/ui/src/components/date-picker/DatePickerRangePanel.vue

DatePickerRangePanel — Events

Name	Signature or type	Description
@update:modelValue	[value: DateRange | null]	Emitted when the calendar range changes, a selection is dragged, or a shortcut is selected, carrying a start/end tuple. Clearing emits null.
Details Declared type [value: DateRange | null] Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Source DatePickerRangePanel.vue packages/ui/src/components/date-picker/DatePickerRangePanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source DatePickerRangePanel.vue packages/ui/src/components/date-picker/DatePickerRangePanel.vue
@confirm	[value: DateRange | null]	Emitted on confirmation with the current start/end tuple, or null when no range is selected.
Details Declared type [value: DateRange | null] Literal values null Referenced types DateRange Type definition — DateRange export type DateRange = readonly [Date, Date] Source DatePickerRangePanel.vue packages/ui/src/components/date-picker/DatePickerRangePanel.vue

DateTimePicker

DateTimePicker — Props

Name	Type	Default	Description
open	boolean | undefined	undefined Runtime fallback:When undefined, the component manages its own open state, initially closed.	The controlled panel open state. Use v-model:open to apply open-state requests emitted by the component.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Runtime fallback When undefined, the component manages its own open state, initially closed. Applied by the component under the documented runtime conditions. Source DateTimePicker.vue:19 packages/ui/src/components/date-picker/DateTimePicker.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value "default" Source DateTimePicker.vue:20 packages/ui/src/components/date-picker/DateTimePicker.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value "default" Source DateTimePicker.vue:21 packages/ui/src/components/date-picker/DateTimePicker.vue
modelValue Nullable	Date | null | undefined	null	The selected date and time, bound with v-model. Changing the calendar date preserves the hours, minutes, and seconds of an existing value.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value null Source types.ts:65 packages/ui/src/components/date-picker/types.ts
showSeconds	boolean | undefined	false	Shows the seconds selector and determines whether the default display format and hidden form value include seconds. Hiding it preserves seconds already present in the Date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value false Source types.ts:66 packages/ui/src/components/date-picker/types.ts
timeStep	{ hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined	{ "hour": 1, "minute": 1, "second": 1 } Factory evaluated per instance Runtime fallback:A missing, non-finite, or rounded-down value below 1 uses a step of 1.	Sets separate option steps for hours, minutes, and seconds. Steps are rounded down and capped at 24 for hours or 60 for minutes and seconds. A current value outside the step sequence is retained as an option.
Details Declared type { hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined Default value details Declaration () => ({ hour: 1, minute: 1, second: 1 }) Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value { "hour": 1, "minute": 1, "second": 1 } Runtime fallback A missing, non-finite, or rounded-down value below 1 uses a step of 1. Applied by the component under the documented runtime conditions. Source types.ts:67 packages/ui/src/components/date-picker/types.ts
placeholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”.	Placeholder text in the trigger when there is no datetime to display.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”. Applied by the component under the documented runtime conditions. Source types.ts:68 packages/ui/src/components/date-picker/types.ts
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Date shortcuts in the datetime panel. An existing selection keeps its time; otherwise the shortcut time is used. Updates are clamped according to the datetime bounds.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value [] Source types.ts:69 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	undefined Runtime fallback:When undefined or null, uses YYYY-MM-DD HH:mm:ss when showSeconds is true, or YYYY-MM-DD HH:mm otherwise.	Formats the date text shown in the trigger using YYYY, YY, MM, DD, HH, mm, ss, and WW, while keeping the bound value as a Date. WW uses ISO week numbers; when the format contains weeks but no month or day tokens, the year is the ISO week year.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses YYYY-MM-DD HH:mm:ss when showSeconds is true, or YYYY-MM-DD HH:mm otherwise. Applied by the component under the documented runtime conditions. Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The lower calendar bound, also applied to the complete datetime after date, time, or shortcut updates. Earlier updates are clamped to this Date.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The upper calendar bound, also applied after date, time, or shortcut updates. When the boundary hours, minutes, and seconds are all zero, other times on that same calendar day remain allowed.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the trigger and hides its clear button. Pickers with a hidden form field also disable that field.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel Clear button and, when a value exists and the trigger is neither disabled nor read-only, its clear button. The panel Confirm button is always shown.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native hidden form field name. It submits YYYY-MM-DD HH:mm or YYYY-MM-DD HH:mm:ss according to showSeconds, independently of displayFormat. Empty values submit an empty string; disabled fields are omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”.	The accessible name of the datetime trigger and popup datetime panel.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePicker.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

DateTimePicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when a date is selected, confirmed, or cleared, updating v-model. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue
@update:open	[value: boolean]	Emitted when the component requests an open-state update for v-model:open. In controlled mode, the parent must update open to change the displayed state.
Details Declared type [value: boolean] Literal values false true Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue
@change	[value: Date | null]	Emitted immediately on confirmation or clearing. On other closes, it is emitted only if the panel selection and the current modelValue have different timestamps.
Details Declared type [value: Date | null] Literal values null Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue

DateTimePicker — Exposes

Name	Signature or type	Description
open	Ref<boolean, boolean>	A writable reference to the panel open state. Assigning through the component instance requests opening or closing; readonly blocks opening requests. Controlled writes emit update:open and require the parent to update open.
Details Declared type Ref<boolean, boolean> Literal values false true Source DateTimePicker.vue packages/ui/src/components/date-picker/DateTimePicker.vue

DateTimePickerPanel

DateTimePickerPanel — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The current standalone datetime-panel value, driving both calendar and time selectors and synchronized with v-model.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value null Source DateTimePickerPanel.vue:32 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
minDate	Date | undefined	undefined	The lower calendar bound, also applied to the complete datetime after date, time, or shortcut updates. Earlier updates are clamped to this Date.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value undefined Source DateTimePickerPanel.vue:33 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
maxDate	Date | undefined	undefined	The upper calendar bound, also applied after date, time, or shortcut updates. When the boundary hours, minutes, and seconds are all zero, other times on that same calendar day remain allowed.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value undefined Source DateTimePickerPanel.vue:34 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Labeled date shortcuts. They merge the time of an existing value or keep the shortcut time when empty, then clamp the update according to the datetime bounds.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value [] Source DateTimePickerPanel.vue:35 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
clearable	boolean | undefined	true	Controls visibility of the panel Clear button. The Confirm button is always shown.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value true Source DateTimePickerPanel.vue:36 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
showSeconds	boolean | undefined	false	Shows a seconds selector in the embedded time picker. Hiding it preserves seconds already present in the Date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value false Source DateTimePickerPanel.vue:37 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
timeStep	{ hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined	{ "hour": 1, "minute": 1, "second": 1 } Factory evaluated per instance Runtime fallback:A missing, non-finite, or rounded-down value below 1 uses a step of 1.	Sets separate option steps for hours, minutes, and seconds. Steps are rounded down and capped at 24 for hours or 60 for minutes and seconds. A current value outside the step sequence is retained as an option.
Details Declared type { hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined Default value details Declaration () => ({ hour: 1, minute: 1, second: 1 }) Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value { "hour": 1, "minute": 1, "second": 1 } Runtime fallback A missing, non-finite, or rounded-down value below 1 uses a step of 1. Applied by the component under the documented runtime conditions. Source DateTimePickerPanel.vue:38 packages/ui/src/components/date-picker/DateTimePickerPanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”.	The accessible name of the datetime panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/DateTimePickerPanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.dateTimePlaceholder, whose English text is “Select date and time”. Applied by the component under the documented runtime conditions. Source DateTimePickerPanel.vue:39 packages/ui/src/components/date-picker/DateTimePickerPanel.vue

DateTimePickerPanel — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted after date, time, or shortcut updates are merged and processed against the datetime bounds. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source DateTimePickerPanel.vue packages/ui/src/components/date-picker/DateTimePickerPanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source DateTimePickerPanel.vue packages/ui/src/components/date-picker/DateTimePickerPanel.vue
@confirm	[value: Date | null]	Emitted when the panel Confirm button is clicked, carrying the current modelValue, including null when nothing is selected.
Details Declared type [value: Date | null] Literal values null Source DateTimePickerPanel.vue packages/ui/src/components/date-picker/DateTimePickerPanel.vue

MonthPicker

MonthPicker — Props

Name	Type	Default	Description
open	boolean | undefined	undefined Runtime fallback:When undefined, the component manages its own open state, initially closed.	The controlled panel open state. Use v-model:open to apply open-state requests emitted by the component.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Runtime fallback When undefined, the component manages its own open state, initially closed. Applied by the component under the documented runtime conditions. Source MonthPicker.vue:19 packages/ui/src/components/date-picker/MonthPicker.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value "default" Source MonthPicker.vue:20 packages/ui/src/components/date-picker/MonthPicker.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value "default" Source MonthPicker.vue:21 packages/ui/src/components/date-picker/MonthPicker.vue
modelValue Nullable	Date | null | undefined	null	The selected month represented by a Date and bound with v-model. Month selection starts with its first day, then clamps the date to the bounds.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value null Source types.ts:98 packages/ui/src/components/date-picker/types.ts
placeholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”.	Placeholder text in the trigger when there is no month to display.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”. Applied by the component under the documented runtime conditions. Source types.ts:99 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	"YYYY-MM"	Formats the date text shown in the trigger using YYYY, YY, MM, DD, HH, mm, ss, and WW, while keeping the bound value as a Date. WW uses ISO week numbers; when the format contains weeks but no month or day tokens, the year is the ISO week year.
Details Declared type string | undefined Default value details Declaration 'YYYY-MM' Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value "YYYY-MM" Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The lower month-selection bound. Months whose last calendar date precedes it are disabled, and a first-of-month value produced by selection or confirmation after year navigation is clamped to this bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The upper month-selection bound. Months starting after it are disabled, and values produced by selection or confirmation after year navigation are clamped to this bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the trigger and hides its clear button. Pickers with a hidden form field also disable that field.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel footer with Clear and Confirm actions. The trigger also shows a clear button when it has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native hidden form field name, submitting the month as YYYY-MM independently of displayFormat. Empty values submit an empty string; disabled fields are omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”.	The accessible name of the month trigger and month panel.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPicker.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

MonthPicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when a date is selected, confirmed, or cleared, updating v-model. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue
@update:open	[value: boolean]	Emitted when the component requests an open-state update for v-model:open. In controlled mode, the parent must update open to change the displayed state.
Details Declared type [value: boolean] Literal values false true Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue
@change	[value: Date | null]	Emitted immediately on confirmation or clearing. On other closes, it is emitted only if the panel selection and the current modelValue have different timestamps.
Details Declared type [value: Date | null] Literal values null Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue

MonthPicker — Exposes

Name	Signature or type	Description
open	Ref<boolean, boolean>	A writable reference to the panel open state. Assigning through the component instance requests opening or closing; readonly blocks opening requests. Controlled writes emit update:open and require the parent to update open.
Details Declared type Ref<boolean, boolean> Literal values false true Source MonthPicker.vue packages/ui/src/components/date-picker/MonthPicker.vue

MonthPickerPanel

MonthPickerPanel — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The Date representing the selected month, whose year initializes the view. An initially empty value displays the current year.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/MonthPickerPanel.vue Resolved value null Source MonthPickerPanel.vue:12 packages/ui/src/components/date-picker/MonthPickerPanel.vue
minDate	Date | undefined	undefined	The lower month-selection bound. Months whose last calendar date precedes it are disabled, and a first-of-month value produced by selection or confirmation after year navigation is clamped to this bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPickerPanel.vue Resolved value undefined Source MonthPickerPanel.vue:13 packages/ui/src/components/date-picker/MonthPickerPanel.vue
maxDate	Date | undefined	undefined	The upper month-selection bound. Months starting after it are disabled, and values produced by selection or confirmation after year navigation are clamped to this bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPickerPanel.vue Resolved value undefined Source MonthPickerPanel.vue:14 packages/ui/src/components/date-picker/MonthPickerPanel.vue
clearable	boolean | undefined	true	Shows the panel footer containing Clear and Confirm buttons. Turning it off hides both buttons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/MonthPickerPanel.vue Resolved value true Source MonthPickerPanel.vue:15 packages/ui/src/components/date-picker/MonthPickerPanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”.	The accessible name of the month panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/MonthPickerPanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.monthPlaceholder, whose English text is “Select month”. Applied by the component under the documented runtime conditions. Source MonthPickerPanel.vue:16 packages/ui/src/components/date-picker/MonthPickerPanel.vue

MonthPickerPanel — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when an available month is selected, using its first day clamped to the bounds. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source MonthPickerPanel.vue packages/ui/src/components/date-picker/MonthPickerPanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source MonthPickerPanel.vue packages/ui/src/components/date-picker/MonthPickerPanel.vue
@confirm	[value: Date | null]	Confirms the current month. If the year was changed without selecting another month, it uses the viewed year and existing month, clamped to the bounds. An empty selection emits null.
Details Declared type [value: Date | null] Literal values null Source MonthPickerPanel.vue packages/ui/src/components/date-picker/MonthPickerPanel.vue

TimePicker

TimePicker — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The Date carrying hours, minutes, and seconds, bound with v-model. Changing one part preserves the date and other parts. An empty value displays zero and uses local midnight today as the base for the first selection.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value null Source TimePicker.vue:12 packages/ui/src/components/date-picker/TimePicker.vue
showSeconds	boolean | undefined	false	Shows the seconds selector. Hiding it does not reset seconds already present in the Date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value false Source TimePicker.vue:13 packages/ui/src/components/date-picker/TimePicker.vue
timeStep	{ hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined	{ "hour": 1, "minute": 1, "second": 1 } Factory evaluated per instance Runtime fallback:A missing, non-finite, or rounded-down value below 1 uses a step of 1.	Sets separate option steps for hours, minutes, and seconds. Steps are rounded down and capped at 24 for hours or 60 for minutes and seconds. A current value outside the step sequence is retained as an option.
Details Declared type { hour?: number | undefined; minute?: number | undefined; second?: number | undefined; } | undefined Default value details Declaration () => ({ hour: 1, minute: 1, second: 1 }) Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value { "hour": 1, "minute": 1, "second": 1 } Runtime fallback A missing, non-finite, or rounded-down value below 1 uses a step of 1. Applied by the component under the documented runtime conditions. Source TimePicker.vue:14 packages/ui/src/components/date-picker/TimePicker.vue
disabled	boolean | undefined	false	Disables every time dropdown and prevents hour, minute, and second selection callbacks from updating the value.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value false Source TimePicker.vue:15 packages/ui/src/components/date-picker/TimePicker.vue
embedded	boolean | undefined	false	Uses the layout and border styling intended for embedding inside a datetime panel.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value false Source TimePicker.vue:16 packages/ui/src/components/date-picker/TimePicker.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.timePlaceholder, whose English text is “Select time”.	The accessible name of the group containing the time selectors. Individual dropdowns retain their localized time-part labels.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/TimePicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.timePlaceholder, whose English text is “Select time”. Applied by the component under the documented runtime conditions. Source TimePicker.vue:17 packages/ui/src/components/date-picker/TimePicker.vue

TimePicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted immediately when an hour, minute, or second is selected, carrying the updated Date for v-model synchronization.
Details Declared type [value: Date | null] Literal values null Source TimePicker.vue packages/ui/src/components/date-picker/TimePicker.vue

WeekPicker

WeekPicker — Props

Name	Type	Default	Description
open	boolean | undefined	undefined Runtime fallback:When undefined, the component manages its own open state, initially closed.	The controlled panel open state. Use v-model:open to apply open-state requests emitted by the component.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Runtime fallback When undefined, the component manages its own open state, initially closed. Applied by the component under the documented runtime conditions. Source WeekPicker.vue:19 packages/ui/src/components/date-picker/WeekPicker.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value "default" Source WeekPicker.vue:20 packages/ui/src/components/date-picker/WeekPicker.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value "default" Source WeekPicker.vue:21 packages/ui/src/components/date-picker/WeekPicker.vue
modelValue Nullable	Date | null | undefined	null	The Date representing the selected week, bound with v-model. Calendar or shortcut selection returns local midnight at the week start specified by weekStartsOn.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value null Source types.ts:82 packages/ui/src/components/date-picker/types.ts
weekStartsOn	0 | 1 | undefined	1	Sets the week start: 0 for Sunday or 1 for Monday. It controls the first calendar column, week highlight, and start date emitted on selection; it is not inferred from the current locale.
Details Declared type 0 | 1 | undefined Literal values 0 1 Default value details Declaration 1 Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value 1 Source types.ts:83 packages/ui/src/components/date-picker/types.ts
placeholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”.	Placeholder text in the trigger when there is no week to display.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”. Applied by the component under the documented runtime conditions. Source types.ts:84 packages/ui/src/components/date-picker/types.ts
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Week shortcuts supplied as Dates or functions returning Dates. Selection converts the value to the week start specified by weekStartsOn.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value [] Source types.ts:85 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	"YYYY-WW"	Formats the date text shown in the trigger using YYYY, YY, MM, DD, HH, mm, ss, and WW, while keeping the bound value as a Date. WW uses ISO week numbers; when the format contains weeks but no month or day tokens, the year is the ISO week year.
Details Declared type string | undefined Default value details Declaration 'YYYY-WW' Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value "YYYY-WW" Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The earliest selectable date passed to the week calendar. Selection is converted to the week start, which can precede this bound; shortcuts are also converted directly to week starts.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The latest selectable date passed to the week calendar. It constrains the selected calendar day rather than requiring the entire week to fit; callers must supply valid shortcut ranges.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the trigger and hides its clear button. Pickers with a hidden form field also disable that field.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel footer with Clear and Confirm actions. The trigger also shows a clear button when it has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native hidden form field name, submitting the current Date as YYYY-MM-DD independently of the week display format. Empty values submit an empty string; disabled fields are omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”.	The accessible name of the week trigger and week panel.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPicker.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

WeekPicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when a date is selected, confirmed, or cleared, updating v-model. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue
@update:open	[value: boolean]	Emitted when the component requests an open-state update for v-model:open. In controlled mode, the parent must update open to change the displayed state.
Details Declared type [value: boolean] Literal values false true Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue
@change	[value: Date | null]	Emitted immediately on confirmation or clearing. On other closes, it is emitted only if the panel selection and the current modelValue have different timestamps.
Details Declared type [value: Date | null] Literal values null Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue

WeekPicker — Exposes

Name	Signature or type	Description
open	Ref<boolean, boolean>	A writable reference to the panel open state. Assigning through the component instance requests opening or closing; readonly blocks opening requests. Controlled writes emit update:open and require the parent to update open.
Details Declared type Ref<boolean, boolean> Literal values false true Source WeekPicker.vue packages/ui/src/components/date-picker/WeekPicker.vue

WeekPickerPanel

WeekPickerPanel — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The date identifying the selected week. Its whole week is highlighted, and selection updates return the week start.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value null Source WeekPickerPanel.vue:32 packages/ui/src/components/date-picker/WeekPickerPanel.vue
weekStartsOn	0 | 1 | undefined	1	Sets the week start: 0 for Sunday or 1 for Monday. It controls the first calendar column, week highlight, and start date emitted on selection; it is not inferred from the current locale.
Details Declared type 0 | 1 | undefined Literal values 0 1 Default value details Declaration 1 Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value 1 Source WeekPickerPanel.vue:33 packages/ui/src/components/date-picker/WeekPickerPanel.vue
minDate	Date | undefined	undefined	The earliest selectable date passed to the week calendar. Selection is converted to the week start, which can precede this bound; shortcuts are also converted directly to week starts.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value undefined Source WeekPickerPanel.vue:34 packages/ui/src/components/date-picker/WeekPickerPanel.vue
maxDate	Date | undefined	undefined	The latest selectable date passed to the week calendar. It constrains the selected calendar day rather than requiring the entire week to fit; callers must supply valid shortcut ranges.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value undefined Source WeekPickerPanel.vue:35 packages/ui/src/components/date-picker/WeekPickerPanel.vue
shortcuts	DatePickerShortcut[] | undefined	[] Factory evaluated per instance	Labeled date shortcuts in the sidebar. Selection and active-state comparison both use the corresponding week start.
Details Declared type DatePickerShortcut[] | undefined Referenced types DatePickerShortcut Type definition — DatePickerShortcut export interface DatePickerShortcut { label: string value: Date | (() => Date) } Default value details Declaration () => [] Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value [] Source WeekPickerPanel.vue:36 packages/ui/src/components/date-picker/WeekPickerPanel.vue
clearable	boolean | undefined	true	Shows the panel footer containing Clear and Confirm buttons. Turning it off hides both buttons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value true Source WeekPickerPanel.vue:37 packages/ui/src/components/date-picker/WeekPickerPanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”.	The accessible name of the week panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/WeekPickerPanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.weekPlaceholder, whose English text is “Select week”. Applied by the component under the documented runtime conditions. Source WeekPickerPanel.vue:38 packages/ui/src/components/date-picker/WeekPickerPanel.vue

WeekPickerPanel — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted on calendar or shortcut selection with local midnight at the week start aligned to weekStartsOn. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source WeekPickerPanel.vue packages/ui/src/components/date-picker/WeekPickerPanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source WeekPickerPanel.vue packages/ui/src/components/date-picker/WeekPickerPanel.vue
@confirm	[value: Date | null]	Emitted when the panel Confirm button is clicked, carrying the current modelValue, including null when nothing is selected.
Details Declared type [value: Date | null] Literal values null Source WeekPickerPanel.vue packages/ui/src/components/date-picker/WeekPickerPanel.vue

YearPicker

YearPicker — Props

Name	Type	Default	Description
open	boolean | undefined	undefined Runtime fallback:When undefined, the component manages its own open state, initially closed.	The controlled panel open state. Use v-model:open to apply open-state requests emitted by the component.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Runtime fallback When undefined, the component manages its own open state, initially closed. Applied by the component under the documented runtime conditions. Source YearPicker.vue:19 packages/ui/src/components/date-picker/YearPicker.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the date trigger height, padding, and icon dimensions.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value "default" Source YearPicker.vue:20 packages/ui/src/components/date-picker/YearPicker.vue
variant	"default" | "error" | "success" | undefined	"default"	Controls the date trigger appearance, with default, error, and success colors.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value "default" Source YearPicker.vue:21 packages/ui/src/components/date-picker/YearPicker.vue
modelValue Nullable	Date | null | undefined	null	The selected year represented by a Date and bound with v-model. Year selection preserves the existing month and day or uses today when empty, adjusting a leap day to a valid date.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value null Source types.ts:112 packages/ui/src/components/date-picker/types.ts
placeholder	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”.	Placeholder text in the trigger when there is no year to display.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”. Applied by the component under the documented runtime conditions. Source types.ts:113 packages/ui/src/components/date-picker/types.ts
displayFormat	string | undefined	"YYYY"	Formats the date text shown in the trigger using YYYY, YY, MM, DD, HH, mm, ss, and WW, while keeping the bound value as a Date. WW uses ISO week numbers; when the format contains weeks but no month or day tokens, the year is the ISO week year.
Details Declared type string | undefined Default value details Declaration 'YYYY' Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value "YYYY" Source types.ts:6 packages/ui/src/components/date-picker/types.ts
minDate	Date | undefined	undefined	The lower bound used to disable year buttons. A year is disabled when its December 31 precedes this value. Selection retains the base month and day instead of clamping the full date to the bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Source types.ts:7 packages/ui/src/components/date-picker/types.ts
maxDate	Date | undefined	undefined	The upper bound used to disable year buttons. A year is disabled when its January 1 follows this value. Selection retains the base month and day instead of clamping the full date to the bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Source types.ts:8 packages/ui/src/components/date-picker/types.ts
disabled	boolean | undefined	false	Disables the trigger and hides its clear button. Pickers with a hidden form field also disable that field.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value false Source types.ts:9 packages/ui/src/components/date-picker/types.ts
readonly	boolean | undefined	false	Prevents the component from opening its panel internally and hides the trigger clear button while preserving the displayed date.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value false Source types.ts:10 packages/ui/src/components/date-picker/types.ts
clearable	boolean | undefined	false	Shows the panel footer with Clear and Confirm actions. The trigger also shows a clear button when it has a value and is neither disabled nor read-only.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value false Source types.ts:11 packages/ui/src/components/date-picker/types.ts
name	string | undefined	undefined	The native hidden form field name, submitting the year as YYYY independently of displayFormat. Empty values submit an empty string; disabled fields are omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/date-picker/types.ts
id	string | undefined	undefined	The HTML ID assigned to the date trigger button for labels or assistive-technology references.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/date-picker/types.ts
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”.	The accessible name of the year trigger and year panel.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”. Applied by the component under the documented runtime conditions. Source types.ts:16 packages/ui/src/components/date-picker/types.ts
class	string | undefined	undefined	Additional CSS classes merged into the date trigger button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPicker.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/date-picker/types.ts

YearPicker — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when a date is selected, confirmed, or cleared, updating v-model. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue
@open	[]	Emitted when the panel state becomes open. Its displayed selection is reinitialized from the current modelValue.
Details Declared type [] Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue
@close	[]	Emitted when the panel state becomes closed.
Details Declared type [] Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue
@update:open	[value: boolean]	Emitted when the component requests an open-state update for v-model:open. In controlled mode, the parent must update open to change the displayed state.
Details Declared type [value: boolean] Literal values false true Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue
@change	[value: Date | null]	Emitted immediately on confirmation or clearing. On other closes, it is emitted only if the panel selection and the current modelValue have different timestamps.
Details Declared type [value: Date | null] Literal values null Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue

YearPicker — Exposes

Name	Signature or type	Description
open	Ref<boolean, boolean>	A writable reference to the panel open state. Assigning through the component instance requests opening or closing; readonly blocks opening requests. Controlled writes emit update:open and require the parent to update open.
Details Declared type Ref<boolean, boolean> Literal values false true Source YearPicker.vue packages/ui/src/components/date-picker/YearPicker.vue

YearPickerPanel

YearPickerPanel — Props

Name	Type	Default	Description
modelValue Nullable	Date | null | undefined	null	The Date representing the selected year and initializing the viewed decade. Clearing returns the view to the decade containing the current year.
Details Declared type Date | null | undefined Literal values null Default value details Declaration null Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value null Source YearPickerPanel.vue:14 packages/ui/src/components/date-picker/YearPickerPanel.vue
minDate	Date | undefined	undefined	The lower bound used to disable year buttons. A year is disabled when its December 31 precedes this value. Selection retains the base month and day instead of clamping the full date to the bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value undefined Source YearPickerPanel.vue:15 packages/ui/src/components/date-picker/YearPickerPanel.vue
maxDate	Date | undefined	undefined	The upper bound used to disable year buttons. A year is disabled when its January 1 follows this value. Selection retains the base month and day instead of clamping the full date to the bound.
Details Declared type Date | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value undefined Source YearPickerPanel.vue:16 packages/ui/src/components/date-picker/YearPickerPanel.vue
clearable	boolean | undefined	true	Shows the panel footer containing Clear and Confirm buttons. Turning it off hides both buttons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value true Source YearPickerPanel.vue:17 packages/ui/src/components/date-picker/YearPickerPanel.vue
yearRange	number | undefined	12 Runtime fallback:If rounding down yields a non-finite number or a value below 1, uses DEFAULT_YEAR_RANGE.	The number of consecutive years per page and the step for previous/next navigation. The initial view still starts at the decade boundary of the selected or current year.
Details Declared type number | undefined Default value details Declaration DEFAULT_YEAR_RANGE Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value 12 Runtime fallback If rounding down yields a non-finite number or a value below 1, uses DEFAULT_YEAR_RANGE. Applied by the component under the documented runtime conditions. Source YearPickerPanel.vue:18 packages/ui/src/components/date-picker/YearPickerPanel.vue
ariaLabel	string | undefined	undefined Runtime fallback:When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”.	The accessible name of the year panel dialog.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/date-picker/YearPickerPanel.vue Resolved value undefined Runtime fallback When undefined or null, uses datePicker.yearPlaceholder, whose English text is “Select year”. Applied by the component under the documented runtime conditions. Source YearPickerPanel.vue:19 packages/ui/src/components/date-picker/YearPickerPanel.vue

YearPickerPanel — Events

Name	Signature or type	Description
@update:modelValue	[value: Date | null]	Emitted when an available year is selected, using the existing or current month and day at local midnight. February 29 becomes February 28 in a non-leap year. Clearing emits null.
Details Declared type [value: Date | null] Literal values null Source YearPickerPanel.vue packages/ui/src/components/date-picker/YearPickerPanel.vue
@clear	[]	Emitted when the panel Clear button is clicked, followed by update:modelValue(null).
Details Declared type [] Source YearPickerPanel.vue packages/ui/src/components/date-picker/YearPickerPanel.vue
@confirm	[value: Date | null]	Confirms the current year. If the existing value is outside the visible year range, it uses the first visible year while preserving month and day and adjusting leap days. An empty value emits null.
Details Declared type [value: Date | null] Literal values null Source YearPickerPanel.vue packages/ui/src/components/date-picker/YearPickerPanel.vue

Accessibility

Keyboard Navigation

Key	Action
Enter / Space	Open the panel
Escape	Close the panel
Tab	Switch between the input and the panel

FAQ

Q: After installation, the component reports an error that the v-calendar module cannot be found?

A: The DatePicker component depends on v-calendar, which is an additional dependency that needs to be installed manually: pnpm add v-calendar. After installation, restart the dev server and it should work normally.

Q: Why doesn't DatePickerRange have an open prop?

A: DatePickerRange and TimePicker do not expose the open reactive ref and do not support controlling the panel state via v-model:open two-way binding. If you need programmatic control of the panel, please use DatePicker, DateTimePicker, WeekPicker, MonthPicker, or YearPicker.

Q: After selecting a date in WeekPicker, why does the displayed week start date not match expectations?

A: The weekStartsOn prop of WeekPicker controls the week start day: 0 means the week starts on Sunday, 1 means the week starts on Monday (default). After selecting any date, modelValue automatically aligns to the start of that week. If the displayed result does not match expectations, please check whether the weekStartsOn setting meets your business requirements.