DateRangePicker

Start and end date fields with one range calendar. Bind the two ends with v-model:start and v-model:end; each is a string in the picker's format (yyyy-mm-dd by default), so they drop straight into URL params or model inputs. The end date is inclusive.

In the calendar, the first click picks the start and the second the end (a second click before the start swaps them), with the range previewed on hover. The value is only emitted once both ends are picked. Typed dates commit per field on blur or Enter, like DatePicker, and an end before the start is flagged and not emitted.

Examples

Simulation window

Start: 2026-05-14, end: 2026-06-30

<script setup>
import { ref } from "vue";
const start = ref("2026-05-14");
const end = ref("2026-06-30");
</script>

<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Simulation window"
/>

Inline layout

By default the two inputs get equal widths with a divider line between them (layout="split"). layout="inline" instead sizes each input to its date and puts a dash between them; separator replaces the dash with other text, such as "to".

Simulation window

–

Reporting period

to

<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Simulation window"
  layout="inline"
/>
<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Reporting period"
  layout="inline"
  separator="to"
/>

Formats

format and display-format work as in DatePicker: format is the model format, and display-format (defaulting to format) is what the inputs show and accept.

Reporting period

Values: 05/14/2026, 06/30/2026

<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Reporting period"
  format="mm/dd/yyyy"
/>

Min and max

min and max (in format) bound both ends. Days outside them are disabled in the calendar, and typed dates outside them are flagged.

Campaign

<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Campaign"
  min="2026-05-14"
  max="2026-08-31"
/>

Clearing

An emptied field emits "" for that end. clearable adds a button that clears both, and required flags an empty field instead and keeps the last value.

Intervention period

Values: "", ""

<DateRangePicker
  v-model:start="start"
  v-model:end="end"
  label="Intervention period"
  clearable
/>

Accessibility

The two inputs sit in a role="group" named by label (or aria-label), and are named "Start date" and "End date" by default; override them with start-label and end-label.

Model

Name	Type
v-model:start	string
v-model:end	string

Props

Prop	Type	Required	Default
label	string	No	—
hideLabel	boolean	No	—
ariaLabel	string	No	—
hint	string	No	—
format	string	No	DEFAULT_DATE_FORMAT
displayFormat	string	No	—
placeholder	string	No	—
min	string	No	—
max	string	No	—
locale	string	No	—
clearable	boolean	No	—
required	boolean	No	—
startLabel	string	No	"Start date"
endLabel	string	No	"End date"
layout	"inline" | "split"	No	"split"
separator	string	No	"–"