QDate

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

TIP

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

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QDate'
    ]
  }
}

Usage

WARNING

Notice that the model is a String only.

Basic

Basic



TIP

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.

Landscape



Custom title and subtitle

When not in ‘minimal’ mode, QDate has a computed header title and subtitle. You can override it, like in the example below.

When clicking on title then the QDate’s view is changed to the calendar and when clicking on subtitle, the view will switch to year picking.

Custom title and subtitle



Functionality

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.

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 QDate is forced to YYYY/MM/DD.

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



TIP

If you want to programatically set the value of QDate, you can do so by just re-assigning the value that you pass. However, the updated value needs to be a string in the same format as your mask. Eg. in the case your mask is 'dddd, MMM D, YYYY', passing '2019/04/28' as value won’t work, you would need to pass 'Sunday, Apr 28, 2019' instead.

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



Highlighting events

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

Events



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.
Options



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



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.

Persian calendar

TIP

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.

WARNING

When using the persian calendar, the mask for QDate is forced to YYYY/MM/DD.

See example

QDate API