DatePicker

A text input that opens a Calendar popover when clicked. Displays the selected date as MMM D, YYYY. Includes a clear button when a value is selected.

ExamplesCodeUsageChangelog

Basic usage

Select date

Select a date

Value: none

Tailwind v4

<script setup>
import { ref } from 'vue'
const date = ref('')
</script>

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

With a pre-selected value

Due date

Jun 10, 2026

Tailwind v4

<DatePicker v-model="date" label="Due date" />

Min / max constraints

Pick a June date

Select a date

Tailwind v4

<DatePicker
  v-model="date"
  label="Pick a June date"
  min-date="2026-06-01"
  max-date="2026-06-30"
/>

Disabled

Locked date

Jun 10, 2026

Tailwind v4

<DatePicker model-value="2026-06-10" label="Locked date" disabled />

Props

Prop	Type	Default	Description
modelValue	string	—	Selected date in YYYY-MM-DD format
label	string	—	Label rendered above the input
placeholder	string	'Select a date'	Placeholder text when no date is selected
disabled	boolean	false	Disables interaction
minDate	string	—	Earliest selectable date (YYYY-MM-DD)
maxDate	string	—	Latest selectable date (YYYY-MM-DD)

Emits

Event	Payload	Description
update:modelValue	string	ISO date string (YYYY-MM-DD) of the selected day, or '' when cleared