Datetime     

The Datetime component provides a method to input dates and time or both. There are also two more versions available: Inline Datetime and 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

<!-- Only Date -->
<q-datetime v-model="model" type="date" />

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

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

Vue Properties

Supports v-model which must be a String, Number or Date Object.

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.
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.
formatStringFormat as described on Handling JS Date page under Format for display section.
format24hBooleanUse 24 hour time for Material picker instead of AM/PM system which is default.
placeholderStringPlaceholder text for input frame to use when model is not set (empty).
display-valueStringText to display on input frame. Superseeds ‘placeholder’.
no-clearBooleanIf set to true, the clear button won’t be shown.
ok-labelStringText for the button to accept the input.
clear-labelStringText for the button to clear the field.
cancel-labelStringText for the button to cancel input with no change.

Common input frame properties:

PropertyTypeDescription
prefixStringA text that should be shown before the textfield.
suffixStringA text that should be shown after the textfield.
float-labelStringA text label that will “float” up above the input field, once the input field gets focus.
stack-labelStringA text label that will be shown above the input field and is static.
colorStringOne from Quasar Color Palette.
invertedBooleanInverted mode. Color is applied to background instead.
darkBooleanIs QDatetime rendered on a dark background?
alignStringOne of ‘left’, ‘center’ or ‘right’ which determines the text align within textfield.
disableBooleanIf set to true, textfield is disabled and the user cannot type anything.
errorBooleanIf set to true, the input fields colors are changed to show there is an error.
beforeArray of ObjectsIcon buttons on left side of input frame. Read below more details.
afterArray of ObjectsIcon buttons on right side of input frame. Read below more details.

Icon buttons

This section refers to before and after properties which can add additional buttons as icons to the textfield. Here is the structure of the two properties:

{
  // required icon
  icon: String,
  // required function to call when
  // icon is clicked/tapped
  handler: Function,

  // Optional. Show icon button
  // if model has a value
  content: Boolean,

  // Optional. Show icon button
  // if textfield is marked with error
  error: Boolean
}

Examples:

<!--
  Show an icon button (with 'warning' as icon)
  when there is an error on QDatetime (through "error" prop)
-->
<q-datetime
  v-model="date"
  :error="error"
  type="password"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  Show an icon button (with 'arrow_forward' as icon)
  when the model has a non empty value
-->
<q-datetime
  v-model="date"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

Vue Methods

Vue MethodDescription
open()Show Popover (on desktop) and Dialog (on mobile) to select date and/or time.
close([Function])Hide Popover (on desktop) and Dialog (on mobile) to select date and/or time and execute Function after it’s been hidden.
clear()Sets model to empty string (removes current value).

Vue Events

Vue EventDescription
@change(newValue)Triggered on model value change.
@blurTriggered, when the modal/ popup is closed.
@focusTriggered, when the modal/ popup is opened.

The Model

Quasar uses its own date utility to work with date values within the model of the component.

IMPORTANT
The model (variable binded to v-model) must either be empty (undefined) or a string in the form of a valid ISO 8601 datetime value, like 2016-10-24T10:40:14.674Z. It can also be a shorter derivative of this string, like 2016-10-24 or 2016-10-24T10:40. The value can also be a Unix Timestamp (including milliseconds), like 1477298414674. Last but not least, it can also be an instance of the Javascript Date Object, like new Date().

For more information about how Quasar works with dates, please refer to the Handling JS Date documentation page.

Here are a few examples of setting up the value prop:

<template>
  <q-datetime v-model="model" type="datetime" />
</template>

<script>
// ....
export default {
  data () {
    return {
      model: undefined // empty value
      // OR
      model: new Date() // as in "right this moment"
      // OR
      model: 1477298414674 // Unix Timestamp with milliseconds
      // OR
      model: '2016-10-24T10:40:14.674Z' // full ISO 8601 compliant value
      // OR
      model: `2016-10-24` // Any dirivative of a valid ISO 8601 datetime value will
                          // also work, like '2016-10-24T10:40:14'
      // OR
      model: `2016-10-24T10:40`, // For an ISO 8601 value, the time must be included
                                 // A Unix Timestamp will also work.
    }
  },
  // ...
}
</script>

More Examples

Error State

Use the error prop, if you’d like for the component to turn red:

<q-datetime :error="hasError" v-model="model" type="datetime" />

Disabled State

Use the disable prop to completely disable the field.

<q-datetime disable v-model="model" type="datetime" />

24h Mode

Sometimes, the locale of your user will be one where 24h formatting is needed. Use the format24h prop for this purpose.

<q-datetime format24h v-model="model" type="time" />

Coloring

Use the color and inverse props to control the color.

<q-datetime
  color="amber-7"
  float-label="Float Label"
  v-model="model"
  type="date"
/>

<q-datetime
  inverted
  color="primary"
  float-label="Float Label"
  v-model="model"
  type="date"
/>

Also, if QDatetime is displayed on a dark background, add the dark property.

<q-datetime dark color="secondary" />

Usage Inside of a List

<q-list>
  <q-list-header>Date or Time</q-list-header>
  <q-item>
    <q-item-side icon="access_time" />
    <q-item-main>
      <q-datetime class="no-margin" v-model="model" type="time" />
    </q-item-main>
  </q-item>
  <q-item>
    <q-item-side icon="update" />
    <q-item-main>
      <q-datetime class="no-margin" v-model="model" type="date" />
    </q-item-main>
  </q-item>
  <q-item-separator />
  <q-list-header>Date & Time</q-list-header>
  <q-item>
    <q-item-side icon="notifications" />
    <q-item-main>
      <q-datetime class="no-margin" v-model="model" type="datetime" />
    </q-item-main>
  </q-item>
</q-list>
Option Group Inline Datetime
Last updated: Tue Feb 20 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub