Date Picker
A popover-driven calendar for picking a single date from a button-style trigger.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/date-picker.jsonUsage
Use the date picker for a single-date field where a full inline calendar would take up too much
space — it opens a Calendar inside a Popover, triggered by a Button styled to look like a
text input. It supports v-model for the selected DateValue.
<script setup lang="ts">
import type { DateValue } from "@internationalized/date";
import { ref } from "vue";
import { DatePicker } from "@/components/ui/date-picker";
const date = ref<DateValue>();
</script>
<template>
<DatePicker v-model="date" placeholder="Pick a date" />
</template>