Date range picker

A focused Date picker entry that always selects a start and end date.

Date range picker

s-date-range-picker forwards Date picker capabilities while fixing type="daterange". Use Date picker for the complete shared property reference.

Code copied

PROPS

PropertyTypeValuesDescriptiondefaultExampleMore
v-model / model-value[DateLike, DateLike] | nulldate rangeSelected start and end values.null
label-format / value-formatStringDay.js format tokensFormat input text and emitted values independently.type-based
min-date / max-date / start-date / end-dateDate | string | numberdate-likeRestrict selectable dates and the initial panel range.-
show-clear-button / show-confirm-buttonBooleantrue | falseControl footer action visibility.true
popup-configObjectplacement | transfer | width | height | zIndex | classNameConfigure popup placement, mounting, size, layer and class.-
No matching data

EVENTS

PropertyTypeValuesDescriptiondefaultExampleMore
changeFired after a complete range is selected or confirmed.
focus / blur / clearForwarded input focus, blur and clear events.
No matching data
Last Updated: 2026-08-17, 08:33:54