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>

运行效果:

相关推荐
2501_9160088914 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu14 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una14 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao14 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇14 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪14 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子15 小时前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍15 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星15 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞16 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html