Usage

DateTimeInput combines a date and a time. The value is YYYY-MM-DDTHH:MM, or null until both parts are set.

<script setup lang="ts">
import { DateTimeInput } from '@astryx-vue/core/DateTimeInput'
import { shallowRef } from 'vue'

const meeting = shallowRef<string | null>(null)
</script>

<template>
  <DateTimeInput v-model="meeting" label="Meeting time" has-clear />
</template>

The date uses the date field. The time uses the same field as the time input. The two fields stay side by side and shrink with the row. They wrap only when the row is narrower than 16rem. bottom-sheet puts the date and the time in one bottom sheet, with tabs to move between them. Clear removes both parts. The date half can show two months and can start the week on a chosen day. While a change is saving, neither field can be edited.

Anatomy

Element	Description
Label	Text above the input describing what datetime is expected.
Segment row	The unbordered layout row that holds the two bordered segments and wraps them when its container is narrow.
Date input	A typed date field with calendar popover on the fine-pointer Astryx surface, a real input type=date in native modes, or a read-only segment opening the Astryx touch sheet under presentation="adaptive-bottom-sheet" on a coarse pointer.
Calendar icon	A button that opens the active date surface: the platform picker, Astryx calendar popover, or Astryx touch sheet.
Date picker	The browser/OS picker in native modes, an Astryx month-grid popover on a fine pointer, or the Date panel of the Astryx bottom sheet on a coarse pointer with presentation="adaptive-bottom-sheet".
Time input	A real input type=time for the default minute-precision native mode, a text/combobox time field when seconds, custom increments, or preset options are requested, or a read-only segment opening accessible time wheels under presentation="adaptive-bottom-sheet" on a coarse pointer.
Clock icon	The time glyph shown as a leading identifier on the Astryx pointer field and as the picker affordance in native and touch-sheet time segments.
Time options popover	A list of preset times at the timeOptionInterval cadence. Setting the prop retains Astryx's text/combobox time field even when nativePicker otherwise selects native controls; the Astryx touch sheet uses wheels instead.
Time option	One selectable preset time in the optional time-options popover.
Clear button	A × button that resets the datetime value.
Status message	An error, warning, or success message below the inputs.

Best practices

Guideline	Practice
Do	Turn on hasClear when the appointment is optional.
Don't	Use it for a date with no time of day. DateInput is the smaller control.

Examples

Validation

Meeting time

Date

This time slot is already booked

Preferred time

Date

This falls outside business hours

Start time

Date

Time confirmed

Error, warning, and success on a filled date and time.

Bottom sheet

Meeting

Su

Mo

Tu

We

Th

Fr

Sa

One bottom sheet switches between the date and the time.