DateTimeSegments

Component

Props

Usage

id

Sets the id of the first segment, so a label with for focuses the input when it is clicked.

 <template>
    <label for="birth-date">Birth date</label>
    <DateTimeSegments id="birth-date" v-model="birthDate" />
</template>
 

• Type: string

type

Sets what the input writes. It uses the DateSegmentsType enum, and each type has its own ISO value: YYYY-MM-DD, YYYY-MM, YYYY-Www, YYYY-MM-DDTHH:mm and HH:mm.

 <template>
    <DateTimeSegments :type="DateSegmentsType.TIME" v-model="startsAt" />
</template>
 

• Type: DateSegmentsType
• Default: DateSegmentsType.DATE

Options

modelValue

Sets the value of the input as an ISO string. It is bindable via v-model. It is empty while the segments are incomplete, or when they are not a real date or time, or are not allowed by isAllowed.

 <template>
    <DateTimeSegments v-model="birthDate" />
</template>

<script setup lang="ts">
const birthDate = ref('2026-10-15')
</script>
 

• Type: string | null
• Default: ''

locale

Sets the BCP 47 locale that decides the order of the segments, the separators and the 12 or 24 hour clock. es-ES writes dd / mm / yyyy, en-US writes mm / dd / yyyy and ja-JP writes yyyy / mm / dd. The digits are always Latin and the calendar Gregorian.

 <template>
    <DateTimeSegments locale="es-ES" />
</template>
 

• Type: string
• Default: 'en-US'

hourFormat

Sets the 12 or 24 hour clock via the HourFormat enum. Defaults to the one of the locale. With the 12 hour clock there is a segment for AM and PM. It only applies to the TIME and DATETIME_LOCAL types.

 <template>
    <DateTimeSegments :type="DateSegmentsType.TIME" :hourFormat="HourFormat.HOURS_24" />
</template>
 

• Type: HourFormat

Options

hasSeconds

Adds a segment for the seconds. It only applies to the TIME and DATETIME_LOCAL types.

 <template>
    <DateTimeSegments :type="DateSegmentsType.TIME" hasSeconds />
</template>
 

• Type: boolean
• Default: false

isAllowed

Sets a function that decides whether a complete value can be used, such as one between two limits. A value that is not allowed is not emitted and the segments are marked as invalid.

 <template>
    <DateTimeSegments v-model="date" :isAllowed="(value) => value >= '2026-10-10'" />
</template>
 

• Type: (value: string) => boolean
• Default: () => true

ariaLabel

Sets the accessible name of the group of segments.

 <template>
    <DateTimeSegments ariaLabel="Birth date" />
</template>
 

• Type: string

disabled

Disables the segments so they cannot be focused or changed.

 <template>
    <DateTimeSegments disabled />
</template>
 

• Type: boolean
• Default: false

readonly

Keeps the segments focusable but stops them from changing.

 <template>
    <DateTimeSegments readonly />
</template>
 

• Type: boolean
• Default: false

Accessibility

The input is a fieldset named by ariaLabel, and each segment is a spinbutton with its own label (day, month, year, hours, minutes, seconds and AM/PM) and its range in aria-valuemin and aria-valuemax. The segments are marked with aria-invalid while they are complete but not a real or allowed value. The separators are hidden from assistive technology.

The segments use a numeric keyboard on mobile, and each digit goes through the rules of its segment, so the keyboard cannot write a value that does not exist.

You can paste an ISO value, such as 2026-10-15 or 19:30, to fill all the segments at once.

Emits

Example

 <template>
    <DateTimeSegments
        v-model="birthDate"
        locale="es-ES"
        @focus="isFocused = true"
        @blur="isFocused = false"
    />
</template>

<script setup lang="ts">
const birthDate = ref('')
const isFocused = ref(false)
</script>
 

Methods

 <template>
    <DateTimeSegments ref="segments" v-model="birthDate" />
    <ActionButton text="Edit" @click="segments?.focus()" />
</template>

<script setup lang="ts">
const birthDate = ref('')
const segments = ref<{ focus: () => void } | null>(null)
</script>