Note

This documentation describes the InputDate, InputDateTime, and InputTime Vue components for native UI views, for Xml templates see input-date, input-datetime, and input-time.

InputDate / InputDateTime / InputTime

Date, datetime, and time picker inputs. Built on top of Textbox with an optional calendar popover (PrimeVue DatePicker).

Import

import { InputDate, InputDateTime, InputTime } from '@neos/design-system'

InputDate

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
`modelValue`	`Date \\| null`	`null`	Bound date value (v-model)
`invalidValue`	`string \\| null`	`undefined`	Raw string when the user types an unresolvable date (v-model:invalidValue)
`format`	`string`	`'d'`	Date format string (e.g. `'d'`, `'D'`, `'MM/dd/yyyy'`)
`minValue`	`Date \\| null`	`undefined`	Earliest selectable date
`maxValue`	`Date \\| null`	`undefined`	Latest selectable date
`calendar`	`boolean`	`true`	Show the calendar picker button

Emits

update:modelValue, update:invalidValue, togglePopover, aiApply, aiCancel, update:focused

Slots

Slot	Description
`before`	Before the text input
`default`	Between calendar button and end of input
`after`	After the calendar button

InputDateTime

Same API as InputDate, but uses a datetime format (default 'g') and shows both date and time pickers.

InputTime

Same API as InputDate, but uses a time-only format (default 't') and shows only a time picker.

Usage Examples

Basic date picker

<InputDate v-model="birthDate" label="Date of Birth" />

Date with min/max range

<InputDate
  v-model="startDate"
  label="Start Date"
  :min-value="today"
  :max-value="maxDate"
  format="MM/dd/yyyy"
/>

Date range: start and end

<HorizontalLayout space="medium">
  <InputDate v-model="from" label="From" :max-value="to" />
  <InputDate v-model="to" label="To" :min-value="from" />
</HorizontalLayout>

Datetime picker

<InputDateTime v-model="scheduledAt" label="Scheduled At" format="g" />

Time only

<InputTime v-model="startTime" label="Start Time" />

Without calendar button

<InputDate v-model="date" label="Entry Date" :calendar="false" />

Table of Contents