The QTime component provides a method to input time.
For handling date and/or time, also check out Quasar Date Utils.
Usage
Notice that the model is a String only.
Basic
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.
Accessibility v2.25+
The header’s hour, minute and second sections are exposed as role="spinbutton" elements per the WAI-ARIA spinbutton pattern, each with a localized aria-label from the Quasar Language Pack and aria-valuemin/aria-valuemax/aria-valuenow reflecting its current value. The AM/PM controls are toggle buttons (aria-pressed). The clock face itself is a pointer-only visualization that is deliberately hidden from assistive technology — the header spinbuttons are the accessible way to set the time.
Keyboard navigation
The hour, minute, second, and AM/PM controls can be activated with Space or Enter. The hour, minute and second controls are exposed as spinbuttons: when one has focus, use the Arrow keys to adjust its value, Home / End to jump to the first/last valid value, or type digits to enter a value directly (e.g. 1 5 sets 15). Their screen reader labels come from the date.hour/date.minute/date.second keys of the Quasar Language Pack.
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.
Clicking on the “Now” button sets time to current user time:
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.
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.
If the mask contains date tokens, set default-date explicitly when using SSR or SSG. The runtime default is the current local date, which can differ between the server and browser.
When using the persian calendar, the mask for QTime is forced to HH:mm or HH:mm:ss (if with-seconds is specified).
If you want to insert strings (including [ and ] characters) into your mask, make sure you escape them by surrounding them with [ and ], otherwise the characters might be interpreted as format tokens.
Using the mask to connect a QDate and QTime to the 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:
Coloring
Limiting options
- You can use the
hour-options,minute-optionsandsecond-optionsprops 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-fnprop.
With QInput
Connecting a QDate and QTime with same model on a 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.
With additional buttons
You can use the default slot for adding buttons:
Native form submit
When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QTime, otherwise formData will not contain it (if it should):