useDateFormat | VueUse

useDateFormat
​
Category
Time
Export Size
807 B
Last Changed
last week

Get the formatted date according to the string of tokens passed in, inspired by dayjs.

List of all available formats (HH:mm:ss by default):

Format	Output	Description
Yo	2018th	Ordinal formatted year
YY	18	Two-digit year
YYYY	2018	Four-digit year
M	1-12	The month, beginning at 1
Mo	1st, 2nd, ..., 12th	The month, ordinal formatted
MM	01-12	The month, 2-digits
MMM	Jan-Dec	The abbreviated month name
MMMM	January-December	The full month name
D	1-31	The day of the month
Do	1st, 2nd, ..., 31st	The day of the month, ordinal formatted
DD	01-31	The day of the month, 2-digits
H	0-23	The hour
Ho	0th, 1st, 2nd, ..., 23rd	The hour, ordinal formatted
HH	00-23	The hour, 2-digits
h	1-12	The hour, 12-hour clock
ho	1st, 2nd, ..., 12th	The hour, 12-hour clock, sorted
hh	01-12	The hour, 12-hour clock, 2-digits
m	0-59	The minute
mo	0th, 1st, ..., 59th	The minute, ordinal formatted
mm	00-59	The minute, 2-digits
s	0-59	The second
so	0th, 1st, ..., 59th	The second, ordinal formatted
ss	00-59	The second, 2-digits
SSS	000-999	The millisecond, 3-digits
A	AM PM	The meridiem
AA	A.M. P.M.	The meridiem, periods
a	am pm	The meridiem, lowercase
aa	a.m. p.m.	The meridiem, lowercase and periods
d	0-6	The day of the week, with Sunday as 0
dd	S-S	The min name of the day of the week
ddd	Sun-Sat	The short name of the day of the week
dddd	Sunday-Saturday	The name of the day of the week
Meridiem is customizable by defining customMeridiem in options.
Demo
​

source

2023-11-18 10:28:02

Formatter Editor :
Usage
​
Basic
​
html
<script setup lang="ts">

import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')

</script>

<template>
  <div>{{ formatted }}</div>
</template>
Use with locales
​
html
<script setup lang="ts">

import { useNow, useDateFormat } from '@vueuse/core'

const formatted = useDateFormat(useNow(), 'YYYY-MM-DD (ddd)', { locales: 'en-US' })

</script>

<template>
  <div>{{ formatted }}</div>
</template>
Use with custom meridiem
​
html
<script setup lang="ts">

import { useDateFormat } from '@vueuse/core'

const customMeridiem = (hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) => {
  const m = hours > 11 ? (isLowercase ? 'μμ' : 'ΜΜ') : (isLowercase ? 'πμ' : 'ΠΜ')
  return hasPeriod ? m.split('').reduce((acc, current) => acc += `${current}.`, '') : m
}

const am = useDateFormat('2022-01-01 05:05:05', 'hh:mm:ss A', { customMeridiem })
// am.value = '05:05:05 ΠΜ'
const pm = useDateFormat('2022-01-01 17:05:05', 'hh:mm:ss AA', { customMeridiem })
// pm.value = '05:05:05 Μ.Μ.'
</script>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
webfansplz
Poet
Dachen
Dino Čamdžić
丶远方
sun0day
Levi (Nguyễn Lương Huy)
Vasya Ponomarenko
aki77
Black
Changelog
​
v10.6.0 on 11/9/2023
61ceb - feat: add date ordinal formatting (#3474)
v10.3.0 on 7/30/2023
d6428 - fix: handle zero properly (#3272)
v10.1.0 on 4/22/2023
a2147 - fix: Error if Y or YYY provided (#3001)
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.3.0 on 9/26/2022
3fda6 - feat: support meridiem format (#2011)
39b27 - feat: support MMM and MMMM formatter (#2234)
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v9.0.1 on 7/29/2022
5b1e0 - feat: support dd, ddd and dddd formatter (#1986)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)