主题
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 | 星期天星期六 | 星期几的名称 |
Meridiem 可通过在
options中定义customMeridiem进行定制。¥Meridiem is customizable by defining
customMeridieminoptions.
示例
用法
¥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>类型声明
显示类型声明
typescript
export type DateLike = Date | number | string | undefined
export interface UseDateFormatOptions {
/**
* The locale(s) to used for dd/ddd/dddd/MMM/MMMM format
*
* [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
*/
locales?: MaybeRefOrGetter<Intl.LocalesArgument>
/**
* A custom function to re-modify the way to display meridiem
*
*/
customMeridiem?: (
hours: number,
minutes: number,
isLowercase?: boolean,
hasPeriod?: boolean,
) => string
}
export declare function formatDate(
date: Date,
formatStr: string,
options?: UseDateFormatOptions,
): string
export declare function normalizeDate(date: DateLike): Date
/**
* Get the formatted date according to the string of tokens passed in.
*
* @see https://vueuse.org/useDateFormat
* @param date - The date to format, can either be a `Date` object, a timestamp, or a string
* @param formatStr - The combination of tokens to format the date
* @param options - UseDateFormatOptions
*/
export declare function useDateFormat(
date: MaybeRefOrGetter<DateLike>,
formatStr?: MaybeRefOrGetter<string>,
options?: UseDateFormatOptions,
): ComputedRef<string>
export type UseDateFormatReturn = ReturnType<typeof useDateFormat>