QTime

The QTime component provides a method to input time.

TIP

For handling date and/or time, also check out Quasar Date Utils.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QTime'
    ]
  }
}

Usage

Notice that the model is a String only.

Basic

Basic



Landscape



TIP

For landscape mode, you can use it along with $q.screen to make QTime responsive. Example: :landscape="$q.screen.gt.xs". More info: Quasar Screen Plugin.

Functionality

The 24 hour format is applied depending on the Quasar Language Pack that you’ve set, but you can also force it, like in the example below.

24h format



Clicking on the “Now” button sets time to current user time:

Now button



Disable and readonly



Model mask

The default model mask is HH:mm (or HH:mm:ss when using with-seconds prop), however you can use custom masks too.

The mask prop tokens can be found at Quasar Utils > Date utils.

Note on SSR

Using x or X (timestamps) in the mask may cause hydration errors on the client, because decoding the model String must be done with new Date() which takes into account the local timezone. As a result, if the server is in a different timezone than the client, then the rendered output of the server will differ than the one on the client so hydration will fail.

Note on persian calendar

When using the persian calendar, the mask for QTime is forced to HH:mm or HH:mm:ss (if with-seconds is specified).

Simple mask



If you want to insert strings into your mask, make sure you escape them by surrounding them with [ and ], otherwise the characters might be interpreted as format tokens.

Mask with escaped characters



Using the mask to connect a QDate and QTime to the same model:

QDate and QTime on same model



Custom ad-hoc locale

If, for some reason, you need to use a custom ad-hoc locale rather than the current Quasar Language Pack that has been set, you can use the locale prop:

Custom ad-hoc locale



Coloring

Coloring



Dark



Limiting options

  • You can use the hour-options, minute-options and second-options props to limit user selection to certain times.
  • Alternatively, for a more in-depth way of limiting options, you can also supply a function (second example below) to options-fn prop.
Options



With QInput

Input



Connecting a QDate and QTime with same model on a QInput:

QDate and QTime with QInput



The following are helpers for QInput mask and rules props. You can use these for convenience or write the string specifying your custom needs.

Examples: “date”, “time”, “fulltime”.

More info: QInput.

QTime API