Vue Date Range Picker Component API

Sets the accessible label (aria-label) of the button that clears the value.

The aria-label of the day section.

The accessible name of the end field, used when it has no floating label.

The aria-label of the hour section.

The aria-label of the meridiem section.

The aria-label of the minute section.

The aria-label of the month section.

A string that provides an accessible label for the button that navigates to the next month in the calendar.

A string that provides an accessible label for the button that navigates to the next year in the calendar.

Sets the accessible label (aria-label) of the button that turns the years view to the next page of years.

A string that provides an accessible label for the button that navigates to the previous month in the calendar.

A string that provides an accessible label for the button that navigates to the previous year in the calendar.

Sets the accessible label (aria-label) of the button that turns the years view to the previous page of years.

Sets the description (aria-describedby) of a grid in which nothing can be picked, such as a page wholly outside minDate / maxDate or one that disabledDates covers, also announced when the calendar turns to such a page. An empty string leaves the grid without a description.

Sets the accessible label (aria-label) of the button that opens the calendar, followed by the range the picker holds.

Sets the accessible label (aria-label) of the calendar panel, which opens as a role="dialog".

The aria-label of the quarter section.

The aria-label of the second section.

Sets the message announced when a pick leaves both ends on the same day, unless the pick closes the panel, which names the toggle with the range instead. {date} is replaced by the full name of that day, week, month, quarter or year. An empty string announces nothing.

Sets the message announced when a pick leaves both ends set, unless the pick closes the panel, which names the toggle with the range instead. {start} and {end} are replaced by the full names of its ends. An empty string announces nothing.

The accessible name of the start field, used when it has no floating label.

The aria-label of the week section.

Names each week number for screen readers: a function that takes the week number and returns its name. Without it the name is the locale's word for week and the number, such as Week 36. Keep the number in the name, so a voice-control user can say what they see.

The aria-label of the year section.

The date the calendar opens on while nothing is selected.

The number of calendars shown side by side.

Renders the button that clears the value.

The element the calendar is rendered into instead of document.body. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

Set the format of day name.

Replaces the DD the day section shows while it is empty.

Toggles the disabled state.

Specify the list of dates that cannot be selected. It can be a single Date, an [start, end] range, a matcher function, or an array of these. In week, month, quarter and year selection a period is disabled when every day of it is.

The end of the range. Passed one-way it seeds the range, which keeps managing itself; bound with v-model:end-date it follows your state.

Name of the end value input. Without it the end date is not submitted with the form.

Provide valuable, actionable feedback to your users with HTML5 form validation feedback.

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied invalid prop.

Provide valuable, actionable valid feedback when using standard HTML form validation which applied valid prop.

Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday,

Keeps the floating label floated and the placeholder visible while the field is empty.

Renders a floating label over each field — ['Check-in', 'Check-out'] — which also becomes that field's accessible name.

The mask layout of the field. A string is parsed as dayjs/moment or date-fns/luxon format tokens, a function receives the locale and returns the section layout, and undefined derives the layout from the locale and the selection type.

Replaces the HH (hh on a 12-hour clock) the hour section shows while it is empty.

Custom function to parse text pasted into the field into a Date object, e.g. with an external date library.

Mark the control invalid.

Use validationState="invalid" instead — invalid is ignored when validationState is set.

Add a caption for a component.

Sets the default locale for the component. If not set, it is inherited from the browser.

Max selectable date. The days after its day are disabled, and a time of day it carries leaves its own day selectable. In week selection its whole week stays selectable.

Replaces the AM the meridiem section shows while it is empty.

Min selectable date. The days before its day are disabled, and a time of day it carries leaves its own day selectable. In week selection its whole week stays selectable.

Replaces the mm the minute section shows while it is empty.

Sets the format for month names.

Twelve custom month names for text month sections (MMM/MMMM), overriding the locale-derived, date-context grammatical form.

Replaces the MM the month section shows while it is empty.

The button that opens the panel. Set to false to render no button; replace the artwork through the pickerIcon slot.

Renders the calendar through a portal: into the open <dialog> the field sits in, otherwise into document.body.

Replaces the Q the quarter section shows while it is empty.

Toggle the readonly state for the component.

When present, it specifies that the field must be filled out before submitting the form.

Replaces the ss the second section shows while it is empty.

Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacentDays option is set to true. A picked day of an adjacent month keeps the month on screen and shows as selected with an outline on a subtle background instead of the solid fill.

Specify the type of date selection as day, week, month, quarter, or year.

Control the open state via v-model:show. When set, the calendar renders what show says and dismiss gestures only emit update:show — nothing closes until the parent flips the prop.

Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.

Set whether to display week numbers in the calendar.

Sizes the control, the way .form-control-sm and .form-control-lg size a form control.

The start of the range. Passed one-way it seeds the range, which keeps managing itself; bound with v-model:start-date it follows your state.

Name of the start value input. Without it the start date is not submitted with the form.

Add helper text to the component.

Display validation feedback in a styled tooltip.

Mark the control valid.

Use validationState="valid" instead — valid is ignored when validationState is set.

The validation state, rendered as the is-{state} class; 'invalid' also sets aria-invalid on the sections of both fields and blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. The user's next change of the range emits update:validationState with undefined.

Controls the visibility of the calendar.

Use show / v-model:show instead — visible is ignored when show is set.

Set length or format of day name.

Label displayed over week numbers in the calendar. Without it the column is named for screen readers with the locale's word for week.

Replaces the WW the week section shows while it is empty.

Sets how the year cells of the years view write the year: 'numeric' (2026) or '2-digit' (26). The navigation always writes the full year.

Replaces the YYYY the year section shows while it is empty.

Callback fired when the calendar date changed.

• date Date | null
• view ViewTypes

Callback fired once when the end of the range changes, whether from its field, the calendar or the context methods; receives the Date the field holds (or null while it is empty, incomplete or out of range) and the formatted value.

• date Date | null — date object
• formattedDate string — formatted date

Callback fired when the validation state changes; receives 'incomplete', 'minDate', 'maxDate', 'disabledDate', or null when the value is valid or the field is empty. When one change moves both the value and the validation state, it fires after start-date-change and end-date-change, so a value set from it replaces the one just reported.

Callback fired when the calendar is hidden.

Callback fired when the calendar is shown.

Callback fired once when the start of the range changes, whether from its field, the calendar or the context methods; receives the Date the field holds (or null while it is empty, incomplete or out of range) and the formatted value.

• date Date | null — date object
• formattedDate string — formatted date

Emit the new end of the range to support the v-model:end-date binding.

• date Date | null — date object

Emit the requested open state to support the v-model:show binding — a dismiss gesture (Escape, a click outside) or any internal toggle.

Emit the new start of the range to support the v-model:start-date binding.

• date Date | null — date object

Event occurs with undefined when the user changes either end, or the form is reset, while validationState (or the deprecated invalid/valid) is set. A given state is a verdict on the range it was given for; bind it with v-model:validation-state to drop it and let the browser's own validation show again.

Callback fired when the calendar's view changes between days, months, quarters or years, and with the starting view each time the calendar opens.

• view ViewTypes