js前端对时间进行格式处理

时间格式处理

通过js前端,使用dayjs库进行格式化

安装dayjs库

bash 复制代码
npm install dayjs

封装成日期格式化工具类 formatter.ts

TypeScript 复制代码
// 导入 dayjs,先安装依赖 npm install dayjs
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

// 配置 dayjs 扩展使用 utc
dayjs.extend(utc);

// 格式化UTC时间
export const formatUTC = (utc: string | Date | number, format = "YYYY-MM-DD HH:mm:ss") => {
  const resultTime = dayjs.utc(utc).format(format);
  return resultTime;
};

// 格式化本地时间
export const format = (date: string | Date | number, format = "YYYY-MM-DD HH:mm:ss") => {
  const resultTime = dayjs(date).format(format);
  return resultTime;
};

// 格式化本地时间
export const formatDate = (date: string | Date | number, format = "YYYY-MM-DD HH:mm:ss") => {
  const resultTime = dayjs(date).format(format);
  return resultTime;
};

// 格式化成中式日期,如:2025年3月27日
export const formatToZhCnDate = (date: string | Date | number) => {
  const resultTime = dayjs(date).format("YYYY年M月DD日");
  return resultTime;
};

从日期格式化工具类 formatter.ts 中导入 formatDate

TypeScript 复制代码
import { formatDate } from "@/utils/formatter";

模板中通过作用域处理日期格式

html 复制代码
        <el-table-column
          prop="operationTime"
          label="时间"
          width="200"
          header-align="center"
          :align="`left`"
          sortable
          show-overflow-tooltip>
          <template #default="scope">
            {{ formatDate(scope.row.operationTime) }}
          </template>
        </el-table-column>

运行效果:

相关推荐
Tachyon.xue17 分钟前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
FuckPatience1 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷3 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪4 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友7 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API7 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx8 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶8 小时前
webpack学习
前端·学习·webpack
excel9 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端