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>

运行效果:

相关推荐
誰能久伴不乏15 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端