如何使用VueJS将UNIX时间戳转换为标准日期格式

首先做前置校验：AEM as a Cloud Service中通过Query Builder查询返回的jcr:created属性如果直接取JCR的Long类型值，默认是毫秒级UNIX时间戳，如果你的Servlet中做过转秒的逻辑，需要先乘1000再传入日期构造函数。

方案1：原生JS实现（无第三方依赖） #

不需要引入额外包，直接写格式化函数即可，兼容Vue2/Vue3：

• 自动适配时间戳单位：自动识别10位秒级/13位毫秒级时间戳，避免转出1970年的异常日期
• 格式完全自定义：按需调整返回的日期字符串结构

Vue3 用法 #

在组件script中定义格式化方法，模板中直接调用：

// <script setup> 内
const formatJcrDate = (timestamp) => {
  // 自动适配秒/毫秒级时间戳
  const targetTime = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp
  const date = new Date(targetTime)

  // 补零逻辑
  const padZero = (num) => String(num).padStart(2, '0')

  // 此处可自定义输出格式，示例为YYYY-MM-DD HH:mm:ss
  return [
    date.getFullYear(),
    padZero(date.getMonth() + 1),
    padZero(date.getDate())
  ].join('-') + ' ' + [
    padZero(date.getHours()),
    padZero(date.getMinutes()),
    padZero(date.getSeconds())
  ].join(':')
}

模板中使用：

<template>
  <p>页面创建时间：{{ formatJcrDate(pageInfo.jcrCreated) }}</p>
</template>

Vue2 用法 #

可以注册全局过滤器，全项目复用：

// main.js 中注册全局过滤器
Vue.filter('jcrDate', function(timestamp) {
  const targetTime = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp
  const date = new Date(targetTime)
  const padZero = (num) => String(num).padStart(2, '0')
  return `${date.getFullYear()}-${padZero(date.getMonth()+1)}-${padZero(date.getDate())}`
})

任意组件模板中直接调用：

<p>创建时间：{{ pageData.jcrCreated | jcrDate }}</p>

方案2：使用dayjs实现（推荐复杂日期场景） #

如果项目中有大量日期处理需求，推荐用轻量库dayjs（打包体积仅2kb左右，远小于moment.js），省去手动写补零、时区处理的逻辑：

1. 安装依赖

   npm install dayjs
   

2. 直接引入使用，支持自定义格式、时区转换

   import dayjs from 'dayjs'
   // 需要时区处理的话引入对应插件
   import utc from 'dayjs/plugin/utc'
   import timezone from 'dayjs/plugin/timezone'
   dayjs.extend(utc)
   dayjs.extend(timezone)
   
   // 直接格式化，示例转成东八区时间的YYYY年MM月DD日格式
   const formatDate = (timestamp) => {
     return dayjs(timestamp).tz('Asia/Shanghai').format('YYYY年MM月DD日')
   }
   

避坑提示：不要直接把AEM返回的时间戳传入new Date()不做单位判断，部分Servlet二次封装返回的时间戳是秒级，直接传入会得到错误日期。

内容的提问来源于stack exchange，提问作者Nikita Tailor