@agala-labs/ui
Date Picker
Selects an ISO date through a collision-aware top-layer popover or inline calendar.
Examples
Default
Jul 10, 2026
<AgalaDatePicker v-model="date" min="2026-01-01" clearable />Import
import { AgalaDatePicker } from '@agala-labs/ui'API
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | ISO date used by v-model. |
size | 'sm' | 'md' | 'lg' | 'md' | Control size. |
min / max | string | — | ISO date bounds. |
clearable | boolean | false | Allows clearing. |
inline | boolean | false | Always displays the calendar. |
highlightDates | string[] | — | ISO dates to emphasize. |
displayMonth | string | — | Controlled YYYY-MM display month. |
disabled | boolean | false | Disables interaction. |
error / errorMessage | boolean / string | — | Validation state and copy. |
Events
update:modelValue(date: string)update:displayMonth(month: string)
Accessibility
Calendar grid supports arrow keys, Home/End, Enter, Space, and Escape.