Calendar

Use calendar for standalone date picking, or compose it inside a Popover to build a date-picker field. Pass layout="month-and-year" to swap the heading for quick month/year NativeSelect dropdowns, which is useful for birthdates or other dates far from today.

<script setup lang="ts">
import { getLocalTimeZone, today } from "@internationalized/date";
import { ref } from "vue";
import { Calendar } from "@/components/ui/calendar";

const value = ref(today(getLocalTimeZone()));
</script>

<template>
  <Calendar v-model="value" layout="month-and-year" class="rounded-lg border" />
</template>

Built on reka-ui's Calendar and the @internationalized/date library for locale-aware date values — install it alongside this component if it isn't already a dependency. Month/year navigation buttons reuse Button's outline variant, and the layout dropdowns reuse NativeSelect.