Quasar Date Format Tester

Type a date.formatDate mask and see what Quasar prints for any date and locale, as you type.

YYYY-MM-DD
DD/MM/YYYY
MM/DD/YYYY
YYYY-MM-DD HH:mm
D MMM YYYY
dddd, MMMM Do YYYY, h:mm A
ddd, D MMM · HH:mm
h:mm A
GGGG-[W]ww
YYYY-MM-DDTHH:mm:ss.SSSZ
[Today is] dddd
yyyy-mm-dd
date.formatDate output
Saturday, November 28th 2026, 9:05 AM
ddddSaturday
,·,·
MMMMNovember
··
Do28th
··
YYYY2026
,·,·
h9
::
mm05
··
AAM
extractDate reads it back as 2026-11-28 09:05:00.000 — not the exact moment you picked. Parts the mask leaves out are reset: no year gives 1900, no time gives 00:00.
QDate can use this mask: it reads the day back from its model.

date.formatDate

import { date } from 'quasar'

const when = new Date(2026, 10, 28, 9, 5, 7, 42) // months count from 0
const label = date.formatDate(when, 'dddd, MMMM Do YYYY, h:mm A')
// 'Saturday, November 28th 2026, 9:05 AM'

date.extractDate

import { date } from 'quasar'

const parsed = date.extractDate('Saturday, November 28th 2026, 9:05 AM', 'dddd, MMMM Do YYYY, h:mm A')
// 2026-11-28 09:05:00.000, local time

QDate mask

<template>
  <q-date
    v-model="day"
    mask="dddd, MMMM Do YYYY, h:mm A"
  />
</template>

<script setup>
import { ref } from 'vue'

const day = ref('Saturday, November 28th 2026, 9:05 AM')
</script>
en-US is Quasar's default language pack, so the code leaves the locale out. If your app sets another language, pass $q.lang.date so the server and the browser print the same names.

Every formatDate token

Outputs are for the date and locale above. Click a token to add it to the mask. Wrap any other text in [brackets].

Year

YYYY
Four-digit year
2026
YY
Two-digit year
26

Month

M
1 to 12
11
Mo
Ordinal, always English
11th
MM
01 to 12
11
MMM
Short name from the locale
Nov
MMMM
Full name from the locale
November

Quarter

Q
1 to 4
4
Qo
Ordinal, always English
4th

Day of month

D
1 to 31
28
Do
Ordinal, always English
28th
DD
01 to 31
28

Day of year

DDD
1 to 366
332
DDDo
Ordinal, always English
332nd
DDDD
001 to 366
332

Day of week

d
0 (Sunday) to 6
6
do
Ordinal, always English
6th
dd
First two letters of the name
Sa
ddd
Short name from the locale
Sat
dddd
Full name from the locale
Saturday
E
ISO: 1 (Monday) to 7
6

ISO week

w
Week number, 1 to 53
48
wo
Ordinal, always English
48th
ww
01 to 53
48
GGGG
ISO week year: use with ww
2026
GG
Two-digit ISO week year
26

Hour

H
0 to 23
9
HH
00 to 23
09
h
1 to 12
9
hh
01 to 12
09

Minute and second

m
Minute, 0 to 59
5
mm
Minute, 00 to 59
05
s
Second, 0 to 59
7
ss
Second, 00 to 59
07

Fraction of a second

S
Tenths
0
SS
Hundredths
04
SSS
Milliseconds
042

AM/PM

A
AM or PM, always English
AM
a
am or pm
am
aa
a.m. or p.m.
a.m.

Time zone and timestamp

Z
Offset of the browser's zone
…
ZZ
Offset without the colon
…
X
Seconds since 1970
…
x
Milliseconds since 1970
…

How to use the Quasar Date Format Tester

  1. Type a mask, or click one of the common masks under the box. The output updates as you type, and the row of tiles shows what each part of the mask prints, so a stray letter that became a token is easy to spot.
  2. Pick a date and time, or click Now, and choose a locale. Month and day names come from that Quasar language pack; ordinals and AM/PM stay English.
  3. Read the warnings and the extractDate line: they tell you when a mask mixes up minutes and months, can't be parsed back, or won't work as a QDate mask.
  4. Copy the formatDate, extractDate or QDate code. It uses the mask, date and locale you chose, and the address bar keeps the mask and locale so you can share the link.

Building the page around those dates? The QuasarUI Components are ready-made Quasar sections you can copy into your app.

Frequently asked questions