Inline Datetime     

The Inline Datetime component provides a method to input dates and time or both and is shown directly on the page or element you are dislpaying. There are also two more versions available: Datetime, which also uses a modal/popup, as well as a Datetime Range.

You’ll notice in the demos that the iOS and Material Datetime pickers look and act totally different, just like their native counterparts.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Basic Usage

<q-inline-datetime v-model="model" type="date" />

<!-- Only Time -->
<q-inline-datetime v-model="model" type="time" />

<!-- Date & Time -->
<q-inline-datetime v-model="model" type="datetime" />

<!-- Date - Monday as first day of week -->
<q-inline-datetime v-model="model" monday-first type="date" />

<!-- Disabled State -->
<q-inline-datetime disable v-model="model" type="datetime" />

<!-- Readonly State -->
<q-inline-datetime readonly v-model="model" type="datetime" />

<!-- Min & Max -->
<q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max" />

<!-- Specific color -->
<q-inline-datetime color="secondary" v-model="model" type="datetime" />

<!-- Time 24hr Format -->
<q-inline-datetime v-model="model" type="time" format24h />

Vue Properties

Supports v-model which must be a String, Number or Date Object. Please refer to the Datetime component for detailed information regarding the model that must be used.

Vue PropertyTypeDescription
typeStringOne of date, time or datetime. Default is date.
minStringOptional minimum value it can take. Has same format as Datetime model.
maxStringOptional maximum value it can take. Has same format as Datetime model.
colorStringOne from Color Palette.
month-namesArrayArray of month names, starting with January.
day-namesArrayArray of day names, starting with Sunday, Monday, …
default-selectionString/Number/DateDefault date/time for picker when model is not yet set.
monday-firstBooleanUse Monday as first day of week. Otherwise it’s Sunday.
saturday-firstBooleanUse Saturday as first day of week. Otherwise it’s Sunday.
format24hBooleanUse 24 hour time for Material picker instead of AM/PM system which is default.
disableBooleanIf set to true, the field is inaccessable.
readonlyBooleanIf set to true, the component is readonly.

Vue Methods

Vue MethodDescription
clear()Sets model to empty string (removes current value).
toggleAmPm()Toggle between AM - PM.

Vue Events

Vue EventDescription
@change(newValue)Triggered on model value change.
Datetime Datetime Range
Last updated: Sun Oct 08 2017
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub