Date Time Field
Edit a civil date and wall-clock time without timezone conversion.
Usage
Local schedule
Commit a civil date and wall-clock time without applying a timezone conversion.
Scheduled forAug 22, 2026 · 9:30 AM
<!-- Date Time Field / Local Schedule -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 9, minute: 30, second: 0, millisecond: 0 } })
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" />
</label>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Scheduled forAug 22, 2026 · 9:30 AM
<!-- Date Time Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 9, minute: 30, second: 0, millisecond: 0 } })
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" />
</label>
</template>Examples
Cross midnight
Keep a local schedule valid when its end time falls on the next civil day.
Scheduled forAug 22, 2026 · 11:45 PM
<!-- Date Time Field / Cross Midnight -->
<script setup lang="ts">
import { ref } from 'vue'
import { DateTimeField } from '@sectile/vue/date-time-field'
const value = ref({ date: { year: 2026, month: 8, day: 22 }, time: { hour: 23, minute: 45, second: 0, millisecond: 0 } })
const policies = { step: { minute: 15 } }
</script>
<template>
<label>
<span>Starts at</span>
<DateTimeField v-model="value" :policies="policies" />
</label>
</template>API
Vue package: @sectile/vue/temporal/date-time-field
DateTimeField
Props
DateTimeFieldProps
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
DateTimeValue
type DateTimeValue = NonNullable<DateTimeFieldOptions['value']>DateTimeFieldValueChangeHandler
type DateTimeFieldValueChangeHandler = (value: DateTimeValue | null) => voidParts
Shared scope: [data-scope="date-time-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 exposing date and time validation as one value.