日期格式化 dateFormat

赞助

格式化日期为指定格式的工具函数

Show Source Code

/**
 * 格式化日期时间
 *
 * @param value - 待格式化的值，支持数字 / 字符串 / Date，默认当前时间
 * @param format - 格式化模板，默认 `'YYYY-MM-DD HH:mm:ss'`
 *                 占位符：`YYYY` / `YY` 年、`M` / `MM` 月、`D` / `DD` 日、`H` / `HH` 时、`m` / `mm` 分、`s` / `ss` 秒、`SSS` 毫秒
 * @returns 格式化后的字符串；数字 / 字符串无法解析为日期时返回空字符串
 *
 * 注意：`Date` 入参不做有效性校验，传入 `Invalid Date` 会得到 `NaN-NaN-NaN …` 而非空字符串。
 */
export function dateFormat(value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss'): string {
  try {
    let date: Date
    if (typeof value === 'number' || typeof value === 'string') {
      date = new Date(value)
      if (isNaN(date.getTime())) {
        throw new Error('Invalid date')
      }
    } else {
      date = value
    }
    const padZero = (value: number, len: number = 2): string => {
      // 左侧补零函数
      return String(value).padStart(len, '0')
    }
    const replacement = (match: string) => {
      switch (match) {
        case 'YYYY':
          return padZero(date.getFullYear())
        case 'YY':
          return padZero(date.getFullYear()).slice(2, 4)
        case 'MM':
          return padZero(date.getMonth() + 1)
        case 'M':
          return String(date.getMonth() + 1)
        case 'DD':
          return padZero(date.getDate())
        case 'D':
          return String(date.getDate())
        case 'HH':
          return padZero(date.getHours())
        case 'H':
          return String(date.getHours())
        case 'mm':
          return padZero(date.getMinutes())
        case 'm':
          return String(date.getMinutes())
        case 'ss':
          return padZero(date.getSeconds())
        case 's':
          return String(date.getSeconds())
        case 'SSS':
          return padZero(date.getMilliseconds(), 3)
        default:
          return match
      }
    }
    return format.replace(/(YYYY|YY|M{1,2}|D{1,2}|H{1,2}|m{1,2}|s{1,2}|SSS)/g, replacement)
  } catch (error) {
    console.error('Error formatting date:', error)
    return ''
  }
}

基本使用

格式化时间戳

2026-10-13 11:01:58

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { dateFormat } from 'vue-amazing-ui'
const date = ref(dateFormat(new Date()))
let rafId = 0
const updateDate = () => {
  date.value = dateFormat(new Date())
  rafId = requestAnimationFrame(updateDate)
}
// SSR（Node）环境无 requestAnimationFrame：挂载后启动，卸载时取消
onMounted(() => {
  rafId = requestAnimationFrame(updateDate)
})
onBeforeUnmount(() => {
  cancelAnimationFrame(rafId)
})
</script>

格式化字符串

10/10/2025

<script setup lang="ts">
import { dateFormat } from 'vue-amazing-ui'
dateFormat('2025-10-10', 'MM/DD/YYYY') // 10/10/2025
</script>

展示毫秒值

2026-10-13 11:01:58:490

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { dateFormat } from 'vue-amazing-ui'
const realTime = ref(dateFormat(Date.now(), 'YYYY-MM-DD HH:mm:ss:SSS'))
let rafId = 0
const updateTime = () => {
  realTime.value = dateFormat(Date.now(), 'YYYY-MM-DD HH:mm:ss:SSS')
  rafId = requestAnimationFrame(updateTime)
}
// SSR（Node）环境无 requestAnimationFrame：挂载后启动，卸载时取消
onMounted(() => {
  rafId = requestAnimationFrame(updateTime)
})
onBeforeUnmount(() => {
  cancelAnimationFrame(rafId)
})
</script>

Params

参数	说明	类型	默认值
value	待格式化的日期时间值，支持数字、字符串和 Date 类型，默认为当前时间戳	number | string | Date	Date.now()
format	格式化字符串	string	'YYYY-MM-DD HH:mm:ss'

Return

类型	说明
string	格式化后的日期时间字符串

format 支持的格式化占位符列表

标识	示例	描述
YY	23	年，两位数
YYYY	2023	年，四位数
M	1-12	月，从 1 开始
MM	01-12	月，两位数
D	1-31	日
DD	01-31	日，两位数
H	0-23	小时
HH	00-23	小时，两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数
SSS	000-999	毫秒，三位数

注意事项

• number / string 类型入参无法解析为日期时返回空字符串 ''，并在控制台输出错误信息
• Date 类型入参不做有效性校验，传入 Invalid Date 不会走降级分支，会得到 NaN-NaN-NaN … 形式的结果