DateRangeInput Props

Name	Type	Default	Description
v-model	DateRange | null	null	{ start, end } ISO dates.
label	string	—	Required accessible name.
presets	{ label, getRange }[]	—	Shortcut buttons. getRange returns a range.
monthCount	number	2	How many months the popover shows.
numberOfMonths	1 | 2	—	Months side by side. This wins over monthCount.
dateConstraints	Array<(date: Date) => boolean>	—	A day is disabled when any function returns false.
min / max	string	—	ISO dates that cannot be selected outside.
minRangeSpan	number	1	Shortest span in days, including both ends.
maxRangeSpan	number	—	Longest span in days, including both ends.
weekStartsOn	0-6 | 'sun' | 'mon' | ...	Sunday, Monday for zh-CN	First column of the calendar.
hasClear	boolean	true	Shows a clear button. Keyboard activation returns focus to the trigger without scrolling the page.
isLabelHidden	boolean	false	Hides the label visually while keeping it accessible. labelHidden is the older name; either one hides it. Playground templates use is-label-hidden.
containerClass	string | object | array	—	Class for the field container. Has no effect, and warns in development, inside InputGroup and in a horizontal-labels FormLayout.
containerStyle	StyleValue	—	Inline style for the field container. Same targeting as containerClass.
controlClass	string | object | array	—	Class for the bordered control box. A class written on the component lands here too, not on the trigger button.
controlStyle	StyleValue	—	Inline style for the bordered control box.
placeholder	string	Select date range	Empty-state text. Follows the locale.
status	FieldStatusInput	—	Error, warning, or success.
statusVariant	'attached' | 'detached' | 'tooltip'	'attached'	Where the status message sits.
isDisabled	boolean	false	Disables the field.
disabledMessage	string	—	Explains why the field is disabled. With isDisabled, the message shows in a tooltip on hover or keyboard focus and the trigger stays focusable with aria-disabled; the calendar still cannot open.
isLoading	boolean	false	The field cannot be edited while a change is saving.
changeAction	(value) => void | Promise<void>	—	Runs after the range is committed. A promise keeps the field busy.
isOptional	boolean	—	Marks the label as optional.
isRequired	boolean	—	Marks the field required.
labelTooltip	string	—	Hint shown from the info icon at the end of the label.