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

BillKu2025-04-11 5:08

时间格式处理

通过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>

运行效果：