IDateRangePicker ​

A two-month calendar for picking a span — a reporting period, a filter window, a stay. The model is a pair of ISO YYYY-MM-DD strings, like IDatePicker.

<script setup lang="ts">
const period = ref({ start: '2026-08-01', end: '2026-08-31' })
</script>

<template>
  <IDateRangePicker v-model="period" />
</template>

Both ends are null while nothing is chosen, and the first click sets start with end still null. Guard on period.end before querying with the range.

<IDateRangePicker v-model="period" placeholder="Select a reporting period" />

Presets ​

presets puts shortcuts beside the calendar. Picking one fills the range and closes the picker. commonDateRangePresets() builds the usual set: today, yesterday, the last 7 and 30 days, this month and last month, all relative to today in the viewer's time zone.

<script setup lang="ts">
import { commonDateRangePresets } from 'iryx-ui'

const range = ref({ start: null, end: null })
const presets = commonDateRangePresets()
</script>

<template>
  <IDateRangePicker v-model="range" :presets="presets" />
</template>

The preset matching the current range is highlighted, and any preset that falls outside min or max is disabled. Pass labels to translate the built-in set, or write your own presets. A function range is re-run every time the picker opens, so relative presets never go stale.

const presets = [
  ...commonDateRangePresets({ today: 'Danes', yesterday: 'Včeraj' }),
  { label: 'Q3 2026', range: { start: '2026-07-01', end: '2026-09-30' } },
]

Months shown ​

Two months side by side is the default, since most ranges cross a month boundary. Drop to one where the popover has no room, or go to three for long ranges.

<IDateRangePicker v-model="period" :months="1" placeholder="One month" />
<IDateRangePicker v-model="period" :months="3" placeholder="Three months" />

On screens narrower than Tailwind's sm breakpoint (40rem), the picker shows one month whatever months says, since two side by side won't fit a phone.

Bounds ​

<IDateRangePicker
  v-model="period"
  min="2026-08-01"
  max="2026-09-15"
  placeholder="Within the window"
/>

Formatting and separator ​

format takes Intl.DateTimeFormatOptions and applies to both ends; separator is the text between them.

<IDateRangePicker
  v-model="period"
  :format="{ day: '2-digit', month: 'short', year: 'numeric' }"
/>
<IDateRangePicker v-model="period" separator=" to " />

Locale and week start ​

<IDateRangePicker
  v-model="period"
  locale="de-DE"
  previous-label="Voriger Monat"
  next-label="Nächster Monat"
/>

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

clearLabel, previousLabel and nextLabel are props as well.

Clearable ​

<IDateRangePicker v-model="period" clearable />

Clearing sets both ends back to null.

Sizes ​

<IDateRangePicker v-model="period" size="sm" />
<IDateRangePicker v-model="period" size="md" />
<IDateRangePicker v-model="period" size="lg" />

Invalid ​

<IDateRangePicker v-model="period" invalid placeholder="Pick a range" />

Props ​

Model ​

interface DateRange {
  start: string | null
  end: string | null
}

The popover closes once both ends are set.