DatePicker

A range-mode wrapper for element-plus date-picker that splits v-model into v-model:start-date and v-model:end-date, making it easy to bind directly to two separate query parameters.

Basic Usage

Properties

Property	Description	Type	Default
v-model:start-date	Start date	Date | string | number | undefined	—
v-model:end-date	End date	Date | string | number | undefined	—
type	Range type	'daterange' | 'datetimerange' | 'monthrange'	'daterange'
value-format	Bound value format; datetime ranges preserve the time by default	string	Date: YYYY-MM-DD; month: YYYY-MM; datetime: YYYY-MM-DD HH:mm:ss
disabled	Whether to disable	boolean	false
start-placeholder	Placeholder for start	string	Inherited from the Element Plus locale
end-placeholder	Placeholder for end	string	Inherited from the Element Plus locale
range-separator	Range separator	string	Inherited from the Element Plus locale
clearable	Whether to show the clear button	boolean	true

💡 Multi-version compatibility: The component props extend the public Element Plus DatePicker props. Except for model-value, type, and the two named models, remaining props and events continue to be forwarded, including size, popper-class, disabled-date, and shortcuts.

Events

Event	Description	Type
change	Triggered when the value changes; clearing returns [undefined, undefined]	Function (value: [Date | string | number | undefined, Date | string | number | undefined]) => void