Date Range Field
Edit two date endpoints while preserving incomplete and invalid drafts.
Usage
Basic
Use the smallest complete composition and let it own its initial value.
Deployment windowAug 22–25, 2026
<!-- Date Range Field / Basic -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 8, day: 22 },
end: { year: 2026, month: 8, day: 25 },
})
</script>
<template>
<DateRangeFieldRoot v-model="range">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>Bounded
Reject values outside the configured minimum and maximum.
Deployment windowSep 8–18, 2026
<!-- Date Range Field / Bounded -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 9, day: 8 },
end: { year: 2026, month: 9, day: 18 },
})
const policies = {
min: { year: 2026, month: 9, day: 1 },
max: { year: 2026, month: 9, day: 30 },
}
</script>
<template>
<DateRangeFieldRoot v-model="range" :policies="policies">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Deployment windowAug 22–25, 2026
<!-- Date Range Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateRangeFieldEndInput, DateRangeFieldRoot, DateRangeFieldStartInput } from '@sectile/vue/temporal/date-range-field'
const range = ref({
start: { year: 2026, month: 8, day: 22 },
end: { year: 2026, month: 8, day: 25 },
})
</script>
<template>
<DateRangeFieldRoot v-model="range">
<label>Start date <DateRangeFieldStartInput name="start" /></label>
<label>End date <DateRangeFieldEndInput name="end" /></label>
</DateRangeFieldRoot>
</template>API
Vue package: @sectile/vue/temporal/date-range-field
DateRangeFieldRootDateRangeFieldStartInputDateRangeFieldEndInput
Props
DateRangeFieldRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
endLabelAccessible label for the range end input.
modelValueCurrent value when state is controlled by the parent.
policiesBehavior policies that customize validation, movement, or selection.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
startLabelAccessible label for the range start input.
Slots
DateRangeFieldRootSlotProps
activeWhether this item is currently active.
disabledWhether interaction is unavailable.
endTextFormatted text for the range end value.
readonlyWhether the value can be inspected but not changed.
startTextFormatted text for the range start value.
valueCurrent value exposed by this contract.
Events
DateRangeFieldRoot
update:modelValueEmitted when the component requests a new controlled value.
Other types
DateRangeFieldValueChangeHandler
type DateRangeFieldValueChangeHandler = (value: DateRange | null) => voidDateRange
| Name | Type | Required |
|---|---|---|
start | DateValue | Yes |
end | DateValue | Yes |
Parts
Shared scope: [data-scope="date-range-field"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
start-input | [data-part="start-input"] | Edits the start value. | — |
end-input | [data-part="end-input"] | Edits the end value. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Arrow Up / Arrow Down | Increment or decrement the active value segment. |
| Enter | Commit the draft value. |
| Escape | Cancel the draft and restore the accepted value. |
Accessibility
Separate labeled start and end inputs expose a single ordered range without hiding endpoint errors.