VueUse 中文网

主题

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):

格式输出描述
Yo2018 年序数格式化年份
YY18两位数年份
YYYY2018四位数年份
M1-12月份，从 1 开始
Mo第一、第二、……、十二月份，序数格式
MM01-12月份，2 位数字
MMM一月至十二月月份名称缩写
MMMM一月至十二月完整的月份名称
D1-31该月的哪一天
Do第一、第二、……、三十一月份中的某一天，采用序号格式
DD01-31月份中的日期，2 位数字
H0-23小时
Ho0 号、1 号、2 号、...、23 号小时，序数格式
HH00-23小时，2 位数字
h1-12小时、12 小时制
ho第一、第二、……、十二小时，12 小时制，已排序
hh01-12小时，12 小时制，2 位数字
m0-59分钟
mo0 号、1 号、...、59 号分钟，序数格式
mm00-59分钟，2 位数字
s0-59第二
so0 号、1 号、...、59 号第二个，序数格式
ss00-59第二个，2 位数字
SSS000-999毫秒，3 位数字
AAM PM子午线
AAA.M.P.M.子午线、时期
a上午下午子午线，小写
aa是。下午子午线、小写字母和周期
d0-6一周中的某一天，星期日为 0
ddS-S星期几的最小名称
ddd日-周六星期几的简称
dddd星期天星期六星期几的名称
zGMT, GMT+1带偏移的时区
zzGMT, GMT+1带偏移的时区
zzzGMT, GMT+1带偏移的时区
zzzzGMT, GMT+01:00带偏移的长时区

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

    ¥Meridiem is customizable by defining customMeridiem in options.

示例 ​

源代码演练场

Tuesday 2025-07-29 21:58:17

Formatter Editor :

用法 ​

¥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
export type UseDateFormatReturn = ComputedRef<string>
/**
 * 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,
): UseDateFormatReturn

源代码 ​

源代码 • 示例 • 文档

变更日志 ​

最近没有更改