The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars.


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


// quasar.conf.js

return {
  framework: {
    components: [



Notice that the model is a String only.



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



When model is unfilled (like null, void 0/undefined) QDate still has to show the calendar for a month of a year. You can use default-year-month prop for this, otherwise the current month of the year will be shown:

Default year month

The default view can be changed.

Default view

The first day of the week is applied depending on the Quasar Language Pack that you’ve set, but you can also force it, like in the example below.

First day of week

Clicking on the “Today” button sets date to current user date. Requires the header, so you can’t use it along with “minimal” mode:

Today button

Disable and readonly

Model mask

The default model mask is YYYY/MM/DD, however you can use custom ones too.

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

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




Highlighting events

The first example is using an array and the second example is using a function.


Event color

Limiting options

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

With QSplitter and QTabPanels

With QSplitter and QTabPanels

More info: QSplitter, QTabPanels.

With QInput

With QInput

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

QDate and QTime with QInput

More info: QInput.

Persian Calendar


You can couple this with a Quasar language pack such as Persian (Farsi, fa-ir) to have the QDate strings translated too, for the full experience.

See example