IDatePicker ​

A calendar in a popover. The model is an ISO YYYY-MM-DD string, never a Date.

<script setup lang="ts">
const issuedOn = ref<string | null>('2026-08-15')
</script>

<template>
  <IDatePicker v-model="issuedOn" />
</template>

The string carries no time zone, so the date stays the day that was picked wherever it is read. Format it on the way out with Intl, dayjs or anything else.

With nothing selected the model is null and the trigger shows placeholder.

<IDatePicker v-model="issuedOn" placeholder="Select an issue date" />

Bounds ​

min and max are ISO strings too. Dates outside the window are rendered disabled rather than hidden, so the reader can see where the limit falls.

<IDatePicker
  v-model="date"
  min="2026-08-10"
  max="2026-08-24"
  placeholder="Within one fortnight"
/>

Formatting the trigger ​

format takes Intl.DateTimeFormatOptions and decides how the selected date reads on the button. The calendar itself is unaffected.

<IDatePicker v-model="date" :format="{ dateStyle: 'full' }" />
<IDatePicker v-model="date" :format="{ day: '2-digit', month: 'short', year: 'numeric' }" />

Locale and week start ​

locale drives the month names, the weekday initials and the trigger's text. weekStartsOn overrides the locale's own convention when you need to — 0 is Sunday.

<IDatePicker
  v-model="date"
  locale="de-DE"
  today-label="Heute"
  previous-label="Voriger Monat"
  next-label="Nächster Monat"
/>

<IDatePicker v-model="date" locale="en-US" :week-starts-on="0" />

Every visible string is a prop: todayLabel, clearLabel, previousLabel and nextLabel.

Clearable ​

clearable adds a clear action beside "Today" in the footer. It sets the model back to null.

<IDatePicker v-model="issuedOn" clearable />

Sizes ​

<IDatePicker v-model="date" size="sm" />
<IDatePicker v-model="date" size="md" />
<IDatePicker v-model="date" size="lg" />

Invalid and disabled ​

<IDatePicker v-model="date" invalid placeholder="Pick a date" />
<IDatePicker v-model="date" disabled />

Props ​

Model ​

const issuedOn = ref<string | null>(null)

For a span rather than a single day, use IDateRangePicker.