主题
useDateFormat
根据传入的标记字符串获取格式化日期，灵感来自 dayjs。
🌐 Get the formatted date according to the string of tokens passed in, inspired by dayjs.
所有可用格式列表（默认 HH:mm:ss）：
| 格式 | 输出 | 描述 |
|---|---|---|
Yo | 2018年 | 序数格式的年份 |
YY | 18 | 两位数年份 |
YYYY | 2018 | 四位数年份 |
M | 1-12 | 月份，从1开始 |
Mo | 第1、第2、…、第12 | 月份，序数格式 |
MM | 01-12 | 月份，两位数字 |
MMM | 一月至十二月 | 缩写的月份名称 |
MMMM | 一月至十二月 | 完整的月份名称 |
D | 1-31 | 月中的日期 |
Do | 第1天、第2天、...、第31天 | 当月的日期，按序数格式 |
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 | 分钟，两位数字 |
s | 0-59 | 秒 |
so | 第0、第1、…、第59 | 第二，序数格式 |
ss | 00-59 | 秒，2位数字 |
SSS | 000-999 | 毫秒，3位数字 |
A | 上午 下午 | 子午线 |
AA | 上午 下午 | 子午线，时间段 |
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 | 带偏移的长时区 |
- 通过在
options中定义customMeridiem可以自定义午前/下午标记。
示例
用法
🌐 Usage
基本的
🌐 Basic
vue
<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
vue
<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
vue
<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>