JavaScript/Typescript日期时间格式化函数封装

适用说明

  • 场景:需要对时间进行格式化处理,但不能使用dayjsmoment三方库的情况;
  • 语言:javascripttypescript
  • 工程:前端工程、基于nodejs开发的后端工程;
  • 效果:支持任意效果的格式化,类似dayjs

代码实现

这里我们使用typescript实现,需要 js 版本的,请自行去除ts 的相关代码即可; 创建date.ts,放置于 utils 目录下:

typescript 复制代码
// 定义日期格式化选项的接口
interface DateFormatOptions {
    "M+": number; // 月份
    "d+": number; // 日
    "h+": number; // 小时
    "m+": number; // 分钟
    "s+": number; // 秒
    "q+": number; // 季度
    "S": number;  // 毫秒
}

/**
 * 格式化日期
 * @param date 要格式化的日期对象或日期字符串
 * @param fmt 格式字符串,例如 "yyyy-MM-dd hh:mm:ss"
 * @returns 格式化后的日期字符串
 */
export function formatDate(date: Date | string, fmt: string): string {
    try {
        date = new Date(date);
        // 如果日期无效,返回 'Invalid Date'
        if (isNaN(date.getTime())) return 'Invalid Date';
    } catch (e) {
        // 捕获错误,默认为当前日期
        date = new Date();
    }

    // 创建格式化选项映射
    const o: DateFormatOptions = {
        "M+": date.getMonth() + 1,                    // 月份
        "d+": date.getDate(),                         // 日
        "h+": date.getHours(),                        // 小时
        "m+": date.getMinutes(),                      // 分钟
        "s+": date.getSeconds(),                      // 秒
        "q+": Math.floor((date.getMonth() + 3) / 3),  // 季度
        "S": date.getMilliseconds()                   // 毫秒
    };

    // 处理年份 (y+)
    if (/(y+)/.test(fmt)) {
        // 将匹配到的年份部分替换为实际年份
        fmt = fmt.replace(RegExp.$1, date.getFullYear().toString().slice(4 - RegExp.$1.length));
    }

    // 处理其他日期格式部分
    for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            // 获取当前匹配的格式符,替换为对应值
            const value = o[k as keyof DateFormatOptions].toString();
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? value : value.padStart(2, '0'));
        }
    }

    return fmt;
}

测试输出

日期 - 格式:年月日

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yy年MM月dd日');
console.log(date); // 输出当前的年月日:如 2024年11月02日

日期 - 格式:-

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yy-MM-dd');
console.log(date); // 输出当前的年月日:如 2024-11-02

日期 - 格式:只要年份 - 四位数年份

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yyyy');
console.log(date); // 输出当前的年:如 2024

日期 - 格式:只要年份 - 两位数年份

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yy');
console.log(date); // 输出当前的年:如 24

日期时间 - 完整的年月日时分秒

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss');
console.log(date); // 输出当前的完整时间:如 2024-11-02 20:09:14

日期时间 - 不需要格式化的分隔符

javascript 复制代码
import { formatDate } from "@/utils/date";
const date = formatDate(new Date(),'yyyyMMdd hhmmss');
console.log(date); // 输出当前的完整时间:如 20241102 200914

总结:

  • 日期时间连接的分隔符可以任意,不需要也可以不用填;
  • 可以单独的只要年份、月份、日期、时间...;
  • 如果传入的是非标准时间、或者不能被new Date构建,将会使用当前的时间进行格式化;
  • 更多功能请自行实现...
相关推荐
摆烂大大王1 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao1 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色1 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
之歆1 小时前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(下)
前端·javascript·es6
lichenyang4532 小时前
鸿蒙 MVVM 实战:从 Demo 到工程化,聊聊登录、状态管理与埋点系统设计
前端
IT_陈寒2 小时前
Vite打包时遇到的坑,原来问题出在这里
前端·人工智能·后端
kyriewen2 小时前
AI生成代码快如闪电,但我修了三个小时——它到底帮了谁?
前端·javascript·ai编程
ayqy贾杰3 小时前
基层管理的三板斧,在AI时代行不通了
前端·后端·团队管理
Apifox3 小时前
Apifox 5 月更新|Postman 导入优化、Runner 支持非 root 运行、请求代码自动带鉴权
前端·后端·安全
miaowmiaow3 小时前
PSD2Code 近期更新与深度解析:从设计稿到生产级代码的完整技术栈
前端·人工智能·ai编程