Components / Forms

DatePickerRange

A two-month range picker with continuous selection bands and native form values.

Preview

Install

Run in your project

npx @getweini/cli@latest add date-picker-range

Use cases

Hotel stay

Collect check-in and check-out calendar dates as separate form values.

Report interval

Limit both endpoints to an allowed reporting window.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import DatePickerRange from './components/ui/date-picker-range/DatePickerRange.vue'
const stay = ref<[string, string]>(['', ''])
</script>

<template>
  <label for="stay-dates">Stay dates</label>
  <DatePickerRange
    id="stay-dates"
    v-model="stay"
    start-name="checkIn"
    end-name="checkOut"
    min="2026-01-01"
    locale="en-GB"
    :messages="{
      calendarLabel: 'Choose check-in and check-out dates',
      previousMonth: 'Previous month',
      nextMonth: 'Next month',
      chooseDates: 'Choose dates',
      chooseEndDate: 'Choose end date',
      clearSelection: 'Clear dates',
    }"
  />
</template>

More examples

Hotel stay

Both name props are needed for native form submission.

Hotel stay

<script setup lang="ts">
import { ref } from 'vue'
import DatePickerRange from './components/ui/date-picker-range/DatePickerRange.vue'
const stay = ref<[string, string]>(['', ''])
const messages = {
  calendarLabel: 'Choose stay dates', previousMonth: 'Previous month', nextMonth: 'Next month',
  chooseDates: 'Choose dates', chooseEndDate: 'Choose check-out date', clearSelection: 'Clear dates',
}
</script>
<template>
  <label for="stay">Stay dates</label>
  <DatePickerRange id="stay" v-model="stay" start-name="checkIn" end-name="checkOut" locale="en-GB" :first-day-of-week="1" :messages="messages" required />
</template>

US reporting interval

Use Sunday-first layout where it matches the audience convention.

US reporting interval

<script setup lang="ts">
import { ref } from 'vue'
import DatePickerRange from './components/ui/date-picker-range/DatePickerRange.vue'
const interval = ref<[string, string]>(['', ''])
const messages = {
  calendarLabel: 'Choose reporting dates', previousMonth: 'Previous month', nextMonth: 'Next month',
  chooseDates: 'Choose dates', chooseEndDate: 'Choose end date', clearSelection: 'Clear dates',
}
</script>
<template>
  <label for="report-dates">Reporting dates</label>
  <DatePickerRange id="report-dates" v-model="interval" min="2026-01-01" max="2026-12-31" locale="en-US" :first-day-of-week="0" :messages="messages" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for DatePickerRange
Name	Type	Default or requirement
`v-model`	[YYYY-MM-DD string, YYYY-MM-DD string]	['', '']
`startName / endName / form`	string	undefined
`size`	sm \| md \| lg	md
`invalid / disabled / readonly / required`	boolean	false
`min / max`	YYYY-MM-DD string	undefined
`locale`	Intl locale string	YYYY-MM-DD display
`firstDayOfWeek`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	1
`messages`	DatePickerRangeMessages	required

Two adjacent months make cross-month ranges visible at once. Narrow screens stack both months in a scrollable calendar. The first click starts a range and the second completes it; selected dates form continuous week-row bands. Set both name props to submit the two native values.

Implementation notes

The model is a [start, end] tuple of YYYY-MM-DD strings; the end is empty while the user is choosing.
Dates are local calendar dates. Resolve check-in and check-out times in the property’s IANA timezone in your booking logic.

Accessibility and localization

Supply an associated label and translate calendar, navigation, and selection messages.