useDateFormat

根据传入的 token 字符串获取格式化日期，灵感来自 dayjs。

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

所有可用格式的列表（默认为 HH:mm:ss）：

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

格式	输出	描述
Yo	2018 年	序数格式化年份
YY	18	两位数年份
YYYY	2018	四位数年份
M	1-12	月份，从 1 开始
Mo	第一、第二、……、十二	月份，序数格式
MM	01-12	月份，2 位数字
MMM	一月至十二月	月份名称缩写
MMMM	一月至十二月	完整的月份名称
D	1-31	该月的哪一天
Do	第一、第二、……、三十一	月份中的某一天，采用序号格式
DD	01-31	月份中的日期，2 位数字
H	0-23	小时
Ho	0 号、1 号、2 号、...、23 号	小时，序数格式
HH	00-23	小时，2 位数字
h	1-12	小时、12 小时制
ho	第一、第二、……、十二	小时，12 小时制，已排序
hh	01-12	小时，12 小时制，2 位数字
m	0-59	分钟
mo	0 号、1 号、...、59 号	分钟，序数格式
mm	00-59	分钟，2 位数字
s	0-59	第二
so	0 号、1 号、...、59 号	第二个，序数格式
ss	00-59	第二个，2 位数字
SSS	000-999	毫秒，3 位数字
A	AM PM	子午线
AA	A.M.P.M.	子午线、时期
a	上午下午	子午线，小写
aa	是。下午	子午线、小写字母和周期
d	0-6	一周中的某一天，星期日为 0
dd	S-S	星期几的最小名称
ddd	日-周六	星期几的简称
dddd	星期天星期六	星期几的名称
z	GMT, GMT+1	带偏移的时区
zz	GMT, GMT+1	带偏移的时区
zzz	GMT, GMT+1	带偏移的时区
zzzz	GMT, GMT+01:00	带偏移的长时区

• Meridiem 可通过在 options 中定义 customMeridiem 进行定制。

  ¥Meridiem is customizable by defining customMeridiem in options.

示例

源代码演练场

Monday 2025-08-18 22:16:38

Formatter Editor :

English (US)FrenchGerman

用法

¥Usage

基本的

¥Basic

<script setup lang="ts">
import { useDateFormat, useNow } from '@vueuse/core'

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

<template>
  <div>{{ formatted }}</div>
</template>

与区域设置一起使用

¥Use with locales

<script setup lang="ts">
import { useDateFormat, useNow } from '@vueuse/core'

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

<template>
  <div>{{ formatted }}</div>
</template>

与自定义子午线一起使用

¥Use with custom meridiem

<script setup lang="ts">
import { useDateFormat } from '@vueuse/core'

function 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>