DateRangePicker

Form

Date range selector with two side-by-side calendars.

Props

Prop	Type	Default	Description
`modelValue`	`{ start: Date \| null, end: Date \| null }`	`{ start: null, end: null }`	Selected range (v-model).
`placeholder`	`string`	`"Pick a date range"`	Placeholder text when nothing is selected.
`disabled`	`boolean`	`false`	Disable the component.

Examples

Select a date range

vue

<script setup>
const range = ref({ start: null, end: null })
</script>
<template>
  <DsDateRangePicker v-model="range" placeholder="Pick a date range" />
</template>

Skeleton

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

Default

vue

<DsDateRangePickerSkeleton />

Accessibility

Clicking outside the calendar closes it.
Keyboard navigation supported.

DatePicker

FileUpload