Inline Datetime     

Quasar provides a way to manage dates and time through Datetime pickers. An inline as well as an input component are available. To see the input version, click/tap here.

The iOS and Material Datetime pickers look and act totally different, just like their native counterparts.

Basic Usage

<!-- Only Date -->
<q-inline-datetime
  v-model="model"
  type="date"
></q-inline-datetime>
<!-- Only Time -->
<q-inline-datetime
  v-model="model"
  type="time"
></q-inline-datetime>
<!-- Date & Time -->
<q-inline-datetime
  v-model="model"
  type="datetime"
></q-inline-datetime>
<!-- Disabled state -->
<q-inline-datetime
  disable
  v-model="model"
  type="date"
></q-inline-datetime>

IMPORTANT
Model must be either an empty string (unfilled state) or a string of form 2016-10-24T10:40:14.674Z.

Model Variable

The model used by DateTime must be a String. Either an empty one, or a Momentjs formatted one, like in the example below:

import moment from 'moment'
// ....
export default {
  data () {
    return {
      model: moment().format(),
      // ...
    }
  },
  // ...
}

Error State

Add has-error CSS class:

<q-inline-datetime
  class="has-error"
  v-model="model"
  type="time"
></q-inline-datetime>

Vue Properties

Vue Methods

Vue Events