Calendar
A month grid calendar for selecting dates. Supports keyboard navigation, min/max date constraints, and highlights today and the selected date.
Basic usage
July 2026
SuMoTuWeThFrSa
Selected: none
vue
<script setup>
import { ref } from 'vue'
const date = ref('')
</script>
<template>
<Calendar v-model="date" />
</template>Pre-selected date
June 2026
SuMoTuWeThFrSa
vue
<Calendar model-value="2026-06-10" />Min / max date constraints
July 2026
SuMoTuWeThFrSa
vue
<Calendar v-model="date" min-date="2026-06-01" max-date="2026-06-30" />Disabled
June 2026
SuMoTuWeThFrSa
vue
<Calendar model-value="2026-06-10" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | Selected date in YYYY-MM-DD format |
minDate | string | — | Earliest selectable date (YYYY-MM-DD) |
maxDate | string | — | Latest selectable date (YYYY-MM-DD) |
disabled | boolean | false | Disables all interaction |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | ISO date string (YYYY-MM-DD) of the selected day |
Keyboard navigation
When the calendar has focus, use arrow keys to move between days, and Enter or Space to select the focused day.