useDateFormat

分类

导出大小

972 B

上次更改

3 个月前

根据传入的标记字符串获取格式化日期，灵感来自 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	月份中的日期，两位数
`H`	0-23	小时
`Ho`	0点, 1点, 2点, ..., 23点	小时，序数格式
`HH`	00-23	小时，两位数
`h`	1-12	小时，12小时制
`ho`	1日, 2日, ..., 12日	小时，12小时制，序数格式
`hh`	01-12	小时，12小时制，两位数
`m`	0-59	分钟
`mo`	0分, 1分, ..., 59分	分钟，序数格式
`mm`	00-59	分钟，两位数
`s`	0-59	秒
`so`	0分, 1分, ..., 59分	秒，序数格式
`ss`	00-59	秒，两位数
`SSS`	000-999	毫秒，三位数
`A`	AM PM	上午/下午
`AA`	A.M. P.M.	上午/下午，带点
`a`	am pm	上午/下午，小写
`aa`	a.m. p.m.	上午/下午，小写带点
`d`	0-6	星期几，周日为0
`dd`	日-六	星期几的缩写名称
`ddd`	周日-周六	星期几的短名称
`dddd`	星期日-星期六	星期几的名称
`z`	GMT, GMT+1	带偏移量的时区
`zz`	GMT, GMT+1	带偏移量的时区
`zzz`	GMT, GMT+1	带偏移量的时区
`zzzz`	GMT, GMT+01:00	带偏移量的完整时区

通过在 options 中定义 customMeridiem 可以自定义上午/下午。

演示

源代码在线演练 (beta)

星期四 2025-10-23 06:49:19

格式化编辑器

英语 (美国)法语德语

用法

基本用法

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>

与语言环境一起使用

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>

与自定义上午/下午一起使用

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>

类型声明

显示类型声明

export type DateLike
 = Date | number | string | undefined
export interface UseDateFormatOptions {
  /**
   * The locale(s) to used for dd/ddd/dddd/MMM/MMMM format
   *
   * [MDN](https://mdn.org.cn/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
export type UseDateFormatReturn
 = ComputedRef
<string>
/**
 * Get the formatted date according to the string of tokens passed in.
 *
 * @see https://vueuse.org.cn/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
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useDateFormat
(
  date
: MaybeRefOrGetter
<DateLike
>,
  formatStr
?: MaybeRefOrGetter
<string>,
  options
?: UseDateFormatOptions,
): UseDateFormatReturn