DatePicker

Form

A date input that opens a Calendar in a popover. Supports min/max and a configurable date format.

Props

Prop	Type	Default	Description
`modelValue`	`Date \| null`	`null`	Selected date (v-model).
`placeholder`	`string`	`"Pick a date"`	Placeholder text.
`format`	`string`	`"DD/MM/YYYY"`	Display format using YYYY MM DD tokens.
`disabled`	`boolean`	`false`	Disables the input.
`min`	`Date`	`–`	Minimum selectable date.
`max`	`Date`	`–`	Maximum selectable date.

Examples

Default

vue

<script setup>
const date = ref(null)
</script>
<template>
  <DsDatePicker v-model="date" placeholder="Pick a date" format="DD/MM/YYYY" />
</template>

Skeleton

Use DsDatePickerSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsDatePickerSkeleton />

Accessibility

Button trigger with aria-expanded.
Calendar is keyboard navigable.
Clear button has aria-label.

Combobox

DateRangePicker