DateRangeField

Overview

A segment-based date range input built on Reka UI's DateRangeFieldRoot. Renders start and end date segments that users tab through individually. Supports granularity for date-only or datetime range input.

Theme entry: DateRangeField

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
modelValue	object		undefined	The controlled date range value. Can be bound as v-model.
defaultValue	object		undefined	The default value when uncontrolled.
placeholder	object		undefined	The placeholder date used to determine initial display when no value is set.
defaultPlaceholder	object		undefined	The default placeholder date.
granularity	string		undefined	The granularity of the date field (e.g. "day", "hour", "minute", "second").
hourCycle	number		undefined	The hour cycle for time formatting (12 or 24).
step	object		undefined	The stepping interval for time fields.
hideTimeZone	boolean		undefined	Whether to hide the time zone segment.
maxValue	object		undefined	The maximum selectable date.
minValue	object		undefined	The minimum selectable date.
locale	string		undefined	The locale used for formatting dates.
disabled	boolean		undefined	When true, prevents interaction with the date field.
readonly	boolean		undefined	When true, the field is read-only.
isDateUnavailable	func		undefined	A function that returns whether a date is unavailable.
id	string		undefined	The id of the underlying element.
name	string		undefined	The name submitted with form data.
required	boolean		false	When true, the field is required.
size	string		"default"	Size variant of the segment field shell.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.

Slots

default

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.
update:placeholder	Emitted when the placeholder date changes.

Full event reference

Source

client/lib/controls/date-range-field/DateRangeField.vue