Usage

DateRangeInput selects a start date and an end date. The value is { start, end } with ISO dates, or null.

<script setup lang="ts">
import type { DateRange } from '@astryx-vue/core/DateRangeInput'
import { DateRangeInput } from '@astryx-vue/core/DateRangeInput'
import { shallowRef } from 'vue'

const range = shallowRef<DateRange | null>(null)
</script>

<template>
  <DateRangeInput v-model="range" label="Date range" />
</template>

The popover shows two months under one header. The first click sets the start. The second click commits the range when the span is allowed. Clicking the start again commits a single day when the shortest span is one day, and cancels the selection otherwise. The closed field omits the year when both ends are in the current year. Presets stay beside the calendars. When the two months no longer fit side by side, they wrap onto separate rows. A constraint can still turn individual days off. While a change is saving, the field cannot be edited.

Anatomy

Element	Description
Label	Text above the trigger describing what date range is expected.
Field surface	Bordered control containing the calendar toggle, range trigger, and end affordances.
Trigger button	A button showing the formatted range or placeholder. Clicking opens the popover.
Calendar icon	A trailing icon that also opens the popover.
Calendar popover	A dual-month calendar grid with range selection and hover preview.
Preset sidebar	A list of preset range options beside the calendar.
Preset button	A quick-select action for one preset range, reflecting current and disabled states.
Clear button	A × button that resets the range to null.
Status message	An error, warning, or success message below the trigger.

Best practices

Guideline	Practice
Do	Offer presets for the ranges people pick most often.
Do	Set minRangeSpan and maxRangeSpan when a one-day or a very long range is invalid. Counts include both ends.
Don't	Use it for one date. DateInput is the control for that.

Examples

Validation

Booking period

Selected dates are no longer available

Preferred period

High demand — limited availability

Confirmed period

Dates confirmed and available

Error, warning, and success on a filled range.

With presets

No range selected

Report period

Use a preset or pick a custom range

Presets for the last 7, 14, 30, and 90 days, or a custom range.