Input Date Range

The Date Range picker allows users to select a start and end date through an interactive calendar. It is primarily used in booking, reservation, or reporting contexts where a period of time must be specified.

When to use

In booking flows where the user must select a check-in and check-out date
In reporting dashboards to filter data by a date interval
Anywhere a time period is required as user input

When not to use

When a single date is sufficient — use QFormFieldDate instead
When the range is always predefined and not editable

Default

Click the trigger to open the calendar. Click a first date to set the start, then click a second date to confirm the range and close the picker.

With controls header

Use show-controls-header to allow the user to jump directly to a specific month and year.

With clearer

Sizes

Use the size prop to match the height of other form inputs: sm, md (default), lg.

Disabled

Readonly

Multiple pickers

Props

Prop	Type	Default	Description
`model-value`	`{ start: Date \| null, end: Date \| null }`	`{ start: null, end: null }`	The current range value
`min`	`Date \| null`	`null`	Minimum selectable date
`max`	`Date \| null`	`null`	Maximum selectable date
`max-date-included`	`Boolean`	`true`	Whether `max` date itself is selectable
`disabled-dates`	`Date[]`	`undefined`	Dates that cannot be selected
`disabled`	`Boolean`	`false`	Disables all interactions
`readonly`	`Boolean`	`false`	Opens the picker but prevents date selection
`start-placeholder`	`String`	`"Start date"`	Placeholder text for start date
`end-placeholder`	`String`	`"End date"`	Placeholder text for end date
`separator`	`String`	`"→"`	Separator between start and end in the trigger
`size`	`String`	-	Trigger size: `xs`, `sm`, `lg`, `xl`
`label`	`String`	`null`	Accessible label for the field
`show-clearer`	`Boolean`	`false`	Show the clear button inside the trigger
`show-controls-header`	`Boolean`	`false`	Show month/year selectors in the calendar header
`placement`	`String`	`"bottom"`	Popover placement
`modal-breakpoint`	`String`	`"isExtraSmall"`	Breakpoint at which the picker opens as a modal
`locale`	`Locale`	`enUS`	date-fns locale for formatting and week start

Events

Event	Payload	Description
`update:modelValue`	`{ start: Date \| null, end: Date \| null }`	Emitted on any range change
`range-selected`	`{ start: Date, end: Date }`	Emitted when a complete range is confirmed
`click-field-clearer`	—	Emitted when the clear button is clicked
`close-popover`	—	Emitted when the picker panel closes
`focus`	—	Emitted when the trigger gains focus
`blur`	—	Emitted when the trigger loses focus
`click`	—	Emitted when the trigger is clicked

Accessibility

The trigger is keyboard-focusable
After selecting the start date, the calendar remains open waiting for the end date selection
Hovering over dates after start selection shows a visual preview of the potential range
Clicking a date before the current start restarts the selection with the new date as start
The calendar icon changes to bi-calendar-check when a complete range is selected
The disabled prop fully disables the trigger; readonly allows inspection but not editing

Input Date Range ​

When to use ​

When not to use ​

Default ​

With controls header ​

With clearer ​

Sizes ​

Disabled ​

Readonly ​

Multiple pickers ​

Props ​

Events ​

Accessibility ​