Date Field
Edit and validate a timezone-free calendar date as structured text.
Usage
Iso date
Edit a timezone-free civil date using an ISO-shaped value.
Selected dateAug 22, 2026
<!-- Date Field / Iso Date -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" />
</label>
</template>Bounded
Reject values outside the configured minimum and maximum.
Selected dateAug 22, 2026
<!-- Date Field / Bounded -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
const policies = {
min: { year: 2026, month: 8, day: 1 },
max: { year: 2026, month: 8, day: 31 },
}
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" :policies="policies" />
</label>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Selected dateAug 22, 2026
<!-- Date Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateField } from '@sectile/vue/date-field'
const value = ref({ year: 2026, month: 8, day: 22 })
</script>
<template>
<label>
<span>Release date</span>
<DateField v-model="value" />
</label>
</template>API
Vue package: @sectile/vue/temporal/date-field
DateField
Props
DateFieldProps
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
labelAccessible name announced for the control.
modelValueCurrent value when state is controlled by the parent.
nativeWhether to use the browser native date or time input UI.
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.
Other types
DateValue
type DateValue = NonNullable<DateFieldOptions['value']>DateFieldValueChangeHandler
type DateFieldValueChangeHandler = (value: DateValue | null) => voidParts
Shared scope: [data-scope="date-field"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
input | [data-part="input"] | Accepts the editable value or draft. | — |
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
The labeled input preserves native text entry while announcing invalid, disabled, and readonly state.