zoukankan      html  css  js  c++  java

  • JavaScript 日期时间格式化

    　　上一篇笔记c#日期时间格式化打印了一下C#格式化日期时间，这里在记录一下JS版本。其实这就是重复造轮子了，有很多现成的类库，例如：momentjs。但是有些时候又没有引用这个类库，没有那么复杂的需求，所以写一个小方法就需要了。先看一下输出记录：

    格式

    结果
    (2021-01-03 06:07:08.009)

    结果
    (2021-11-22 15:36:48.678)

    C#

    JavaScript

    C#

    JavaScript

    年相关

    y

    2021年1月

    2021

    2021年11月

    2021

    yy

    21

    21

    21

    21

    yyy

    2021

    2021

    2021

    2021

    yyyy

    2021

    2021

    2021

    2021

    yyyyy

    02021

    02021

    02021

    02021

    yyyyyy

    002021

    002021

    002021

    002021

    y-MM-dd

    21-01-03

    2021-01-03

    21-11-22

    2021-11-22

    yy-MM-dd

    21-01-03

    21-01-03

    21-11-22

    21-11-22

    yyy-MM-dd

    2021-01-03

    2021-01-03

    2021-11-22

    2021-11-22

    yyyy-MM-dd

    2021-01-03

    2021-01-03

    2021-11-22

    2021-11-22

    yyyyy-MM-dd

    02021-01-03

    02021-01-03

    02021-11-22

    02021-11-22

    yyyyyy-MM-dd

    002021-01-03

    002021-01-03

    002021-11-22

    002021-11-22

    月相关

    M

    1月3日

    1

    11月22日

    11

    MM

    01

    01

    11

    11

    MMM

    1月

    1月

    11月

    11月

    MMMM

    一月

    一月

    十一月

    十一月

    MMMMM

    一月

    一月

    十一月

    十一月

    yyyy-M-dd

    2021-1-03

    2021-1-03

    2021-11-22

    2021-11-22

    yyyy-MM-dd

    2021-01-03

    2021-01-03

    2021-11-22

    2021-11-22

    yyyy-MMM-dd

    2021-1月-03

    2021-1月-03

    2021-11月-22

    2021-11月-22

    yyyy-MMMM-dd

    2021-一月-03

    2021-一月-03

    2021-十一月-22

    2021-十一月-22

    yyyy-MMMMM-dd

    2021-一月-03

    2021-一月-03

    2021-十一月-22

    2021-十一月-22

    天相关

    d

    2021/1/3

    3

    2021/11/22

    22

    dd

    03

    03

    22

    22

    ddd

    周日

    周日

    周一

    周一

    dddd

    星期日

    星期日

    星期一

    星期一

    ddddd

    星期日

    星期日

    星期一

    星期一

    yyyy-MM-d

    2021-01-3

    2021-01-3

    2021-11-22

    2021-11-22

    yyyy-MM-dd

    2021-01-03

    2021-01-03

    2021-11-22

    2021-11-22

    yyyy-MM-ddd

    2021-01-周日

    2021-01-周日

    2021-11-周一

    2021-11-周一

    yyyy-MM-dddd

    2021-01-星期日

    2021-01-星期日

    2021-11-星期一

    2021-11-星期一

    yyyy-MM-ddddd

    2021-01-星期日

    2021-01-星期日

    2021-11-星期一

    2021-11-星期一

    小时相关1

    h

    不支持

    6

    不支持

    3

    hh

    06

    06

    03

    03

    hhh

    06

    06

    03

    03

    hhhh

    06

    06

    03

    03

    h:mm:ss.fff

    6:07:08.009

    6:07:08.009

    3:36:48.678

    3:36:48.678

    hh:mm:ss.fff

    06:07:08.009

    06:07:08.009

    03:36:48.678

    03:36:48.678

    hhh:mm:ss.fff

    06:07:08.009

    06:07:08.009

    03:36:48.678

    03:36:48.678

    hhhh:mm:ss.fff

    06:07:08.009

    06:07:08.009

    03:36:48.678

    03:36:48.678

    小时相关1

    H

    不支持

    6

    不支持

    15

    HH

    06

    06

    15

    15

    HHH

    06

    06

    15

    15

    HHHH

    06

    06

    15

    15

    H:mm:ss.fff

    6:07:08.009

    6:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HHH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HHHH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    分钟相关

    m

    1月3日

    7

    11月22日

    36

    mm

    07

    07

    36

    36

    mmm

    07

    07

    36

    36

    mmmm

    07

    07

    36

    36

    HH:m:ss.fff

    06:7:08.009

    06:7:08.009

    15:36:48.678

    15:36:48.678

    HH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mmm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mmmm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    秒相关

    s

    2021-01-03T06:07:08

    8

    2021-11-22T15:36:48

    48

    ss

    08

    08

    48

    48

    sss

    08

    08

    48

    48

    ssss

    08

    08

    48

    48

    HH:mm:s.fff

    06:07:8.009

    06:07:8.009

    15:36:48.678

    15:36:48.678

    HH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mm:sss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mm:ssss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    毫秒相关

    f

    2021年1月3日 6:07

    0

    2021年11月22日 15:36

    6

    ff

    00

    00

    67

    67

    fff

    009

    009

    678

    678

    ffff

    0090

    0090

    6780

    6780

    fffff

    00900

    00900

    67800

    67800

    ffffff

    009000

    009000

    678000

    678000

    HH:mm:ss.f

    06:07:08.0

    06:07:08.0

    15:36:48.6

    15:36:48.6

    HH:mm:ss.ff

    06:07:08.00

    06:07:08.00

    15:36:48.67

    15:36:48.67

    HH:mm:ss.fff

    06:07:08.009

    06:07:08.009

    15:36:48.678

    15:36:48.678

    HH:mm:ss.ffff

    06:07:08.0090

    06:07:08.0090

    15:36:48.6780

    15:36:48.6780

    HH:mm:ss.fffff

    06:07:08.00900

    06:07:08.00900

    15:36:48.67800

    15:36:48.67800

    HH:mm:ss.ffffff

    06:07:08.009000

    06:07:08.009000

    15:36:48.678000

    15:36:48.678000

    上午/下午

    t

    6:07

    上

    15:36

    下

    tt

    上午

    上午

    下午

    下午

    ttt

    上午

    上午

    下午

    下午

    tttt

    上午

    上午

    下午

    下午

    t HH:mm:ss

    上 06:07:08

    上 06:07:08

    下 15:36:48

    下 15:36:48

    tt HH:mm:ss

    上午 06:07:08

    上午 06:07:08

    下午 15:36:48

    下午 15:36:48

    ttt HH:mm:ss

    上午 06:07:08

    上午 06:07:08

    下午 15:36:48

    下午 15:36:48

    tttt HH:mm:ss

    上午 06:07:08

    上午 06:07:08

    下午 15:36:48

    下午 15:36:48

     　　这里并没有完全参照C#的格式化，也参照了一下momentjs，下面看一下代码：

    /**
 * 格式化日期
 * 例子： dateExtend_Format(new Date(),"yyyy-MM-dd hh:mm:ss SSS")
 * @param {Date} targetDate 
 * @param {String} format 
 * @returns {string} 返回格式化之后字符串
 */
export const dateExtend_Format = function (targetDate, format) {
    if (getDataType(targetDate) !== "date")
        throw new Error("参数异常：targetDate必须是Date类型");
    if (!(getDataType(format) === "string" && format.length))
        throw new Error("参数异常：format必须是String类型并且不能为空");
    let year0 = targetDate.getFullYear(),
        momth0 = targetDate.getMonth() + 1,
        date0 = targetDate.getDate(),
        day0 = targetDate.getDay(),
        hour0 = targetDate.getHours(),
        minute0 = targetDate.getMinutes(),
        second0 = targetDate.getSeconds(),
        millisecond0 = targetDate.getMilliseconds(),
        quarter0 = Math.floor((momth0 + 2) / 3),
        numToCnObj = {
            0: "日",
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "七",
            8: "八",
            9: "九",
            10: "十",
            11: "十一",
            12: "十二",
        },
        week0 = numToCnObj[day0];

    function handleMillisecond(matchLength) {
        let retStr = millisecond0.toString().padStart(3, "0");
        if (matchLength > 3) {
            retStr = retStr.padEnd(matchLength, "0");
        } else {
            retStr = retStr.substr(0, matchLength);
        }
        return retStr;
    }
    let o = {
        "y+": function (matchLength) {
            // y和yyy都返回1999
            let retStr = year0.toString();
            if (matchLength === 2) {
                retStr = retStr.substr(-2, 2);
            } else if (matchLength > 4) {
                retStr = retStr.padStart(matchLength, "0");
            }
            return retStr;
        },
        "M+": function (matchLength) {
            let retStr = momth0.toString();
            switch (matchLength) {
                case 1: {
                    break;
                }
                case 2: {
                    retStr = retStr.padStart(2, "0");
                    break;
                }
                case 3: {
                    retStr = retStr + "月";
                    break;
                }
                default: {
                    retStr = numToCnObj[retStr] + "月";
                    break;
                }
            }
            return retStr;
        },
        "d+": function (matchLength) {
            let retStr = date0.toString();
            switch (matchLength) {
                case 1: {
                    break;
                }
                case 2: {
                    retStr = retStr.padStart(2, "0");
                    break;
                }
                case 3: {
                    retStr = "周" + week0;
                    break;
                }
                default: {
                    retStr = "星期" + week0;
                    break;
                }
            }
            return retStr;
        },
        "h+": function (matchLength) {
            let retStr = hour0 > 12 ? (hour0 - 12).toString() : hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "H+": function (matchLength) {
            let retStr = hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "m+": function (matchLength) {
            let retStr = minute0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "s+": function (matchLength) {
            let retStr = second0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "S+": handleMillisecond,
        "f+": handleMillisecond,
        "t+": function (matchLength) {
            let retStr = hour0 > 12 ? "下午" : "上午";
            if (matchLength === 1) {
                retStr = retStr.substr(0, matchLength);
            }
            return retStr;
        },
        "q+": function (matchLength) {
            return quarter0.toString()
        },
        "w": function (matchLength) {
            return week0.toString()
        },
    }
    for (let k in o) {
        const arrayMatch = [...format.matchAll(new RegExp("(" + k + ")", "g"))];
        if (Array.isArray(arrayMatch) && arrayMatch.length) {
            arrayMatch.forEach((item) => {
                format = format.replace(item[0], o[k](item[0].length));
            });
        }
    }
    return format;
}
    View Code
    //var date1 = new Date("2021-11-22 15:36:48.678");
var date1 = new Date("2021-01-03 06:07:08.009");
console.log("y->" + dateExtend_Format(date1, "y"));
console.log("yy->" + dateExtend_Format(date1, "yy"));
console.log("yyy->" + dateExtend_Format(date1, "yyy"));
console.log("yyyy->" + dateExtend_Format(date1, "yyyy"));
console.log("yyyyy->" + dateExtend_Format(date1, "yyyyy"));
console.log("yyyyyy->" + dateExtend_Format(date1, "yyyyyy"));
console.log("y-MM-dd->" + dateExtend_Format(date1, "y-MM-dd"));
console.log("yy-MM-dd->" + dateExtend_Format(date1, "yy-MM-dd"));
console.log("yyy-MM-dd->" + dateExtend_Format(date1, "yyy-MM-dd"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyyy-MM-dd->" + dateExtend_Format(date1, "yyyyy-MM-dd"));
console.log("yyyyyy-MM-dd->" + dateExtend_Format(date1, "yyyyyy-MM-dd"));

console.log("M->" + dateExtend_Format(date1, "M"));
console.log("MM->" + dateExtend_Format(date1, "MM"));
console.log("MMM->" + dateExtend_Format(date1, "MMM"));
console.log("MMMM->" + dateExtend_Format(date1, "MMMM"));
console.log("MMMMM->" + dateExtend_Format(date1, "MMMMM"));
console.log("yyyy-M-dd->" + dateExtend_Format(date1, "yyyy-M-dd"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyy-MMM-dd->" + dateExtend_Format(date1, "yyyy-MMM-dd"));
console.log("yyyy-MMMM-dd->" + dateExtend_Format(date1, "yyyy-MMMM-dd"));
console.log("yyyy-MMMMM-dd->" + dateExtend_Format(date1, "yyyy-MMMMM-dd"));

console.log("d->" + dateExtend_Format(date1, "d"));
console.log("dd->" + dateExtend_Format(date1, "dd"));
console.log("ddd->" + dateExtend_Format(date1, "ddd"));
console.log("dddd->" + dateExtend_Format(date1, "dddd"));
console.log("ddddd->" + dateExtend_Format(date1, "ddddd"));
console.log("yyyy-MM-d->" + dateExtend_Format(date1, "yyyy-MM-d"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyy-MM-ddd->" + dateExtend_Format(date1, "yyyy-MM-ddd"));
console.log("yyyy-MM-dddd->" + dateExtend_Format(date1, "yyyy-MM-dddd"));
console.log("yyyy-MM-ddddd->" + dateExtend_Format(date1, "yyyy-MM-ddddd"));

console.log("h->" + dateExtend_Format(date1, "h"));
console.log("hh->" + dateExtend_Format(date1, "hh"));
console.log("hhh->" + dateExtend_Format(date1, "hhh"));
console.log("hhhh->" + dateExtend_Format(date1, "hhhh"));
console.log("h:mm:ss.fff->" + dateExtend_Format(date1, "h:mm:ss.fff"));
console.log("hh:mm:ss.fff->" + dateExtend_Format(date1, "hh:mm:ss.fff"));
console.log("hhh:mm:ss.fff->" + dateExtend_Format(date1, "hhh:mm:ss.fff"));
console.log("hhhh:mm:ss.fff->" + dateExtend_Format(date1, "hhhh:mm:ss.fff"));

console.log("H->" + dateExtend_Format(date1, "H"));
console.log("HH->" + dateExtend_Format(date1, "HH"));
console.log("HHH->" + dateExtend_Format(date1, "HHH"));
console.log("HHHH->" + dateExtend_Format(date1, "HHHH"));
console.log("H:mm:ss.fff->" + dateExtend_Format(date1, "H:mm:ss.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HHH:mm:ss.fff->" + dateExtend_Format(date1, "HHH:mm:ss.fff"));
console.log("HHHH:mm:ss.fff->" + dateExtend_Format(date1, "HHHH:mm:ss.fff"));

console.log("m->" + dateExtend_Format(date1, "m"));
console.log("mm->" + dateExtend_Format(date1, "mm"));
console.log("mmm->" + dateExtend_Format(date1, "mmm"));
console.log("mmmm->" + dateExtend_Format(date1, "mmmm"));
console.log("HH:m:ss.fff->" + dateExtend_Format(date1, "HH:m:ss.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mmm:ss.fff->" + dateExtend_Format(date1, "HH:mmm:ss.fff"));
console.log("HH:mmmm:ss.fff->" + dateExtend_Format(date1, "HH:mmmm:ss.fff"));

console.log("s->" + dateExtend_Format(date1, "s"));
console.log("ss->" + dateExtend_Format(date1, "ss"));
console.log("sss->" + dateExtend_Format(date1, "sss"));
console.log("ssss->" + dateExtend_Format(date1, "ssss"));
console.log("HH:mm:s.fff->" + dateExtend_Format(date1, "HH:mm:s.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mm:sss.fff->" + dateExtend_Format(date1, "HH:mm:sss.fff"));
console.log("HH:mm:ssss.fff->" + dateExtend_Format(date1, "HH:mm:ssss.fff"));

console.log("f->" + dateExtend_Format(date1, "f"));
console.log("ff->" + dateExtend_Format(date1, "ff"));
console.log("fff->" + dateExtend_Format(date1, "fff"));
console.log("ffff->" + dateExtend_Format(date1, "ffff"));
console.log("fffff->" + dateExtend_Format(date1, "fffff"));
console.log("ffffff->" + dateExtend_Format(date1, "ffffff"));

console.log("HH:mm:ss.f->" + dateExtend_Format(date1, "HH:mm:ss.f"));
console.log("HH:mm:ss.ff->" + dateExtend_Format(date1, "HH:mm:ss.ff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mm:ss.ffff->" + dateExtend_Format(date1, "HH:mm:ss.ffff"));
console.log("HH:mm:ss.fffff->" + dateExtend_Format(date1, "HH:mm:ss.fffff"));
console.log("HH:mm:ss.ffffff->" + dateExtend_Format(date1, "HH:mm:ss.ffffff"));

console.log("t->" + dateExtend_Format(date1, "t"));
console.log("tt->" + dateExtend_Format(date1, "tt"));
console.log("ttt->" + dateExtend_Format(date1, "ttt"));
console.log("tttt->" + dateExtend_Format(date1, "tttt"));
console.log("t HH:mm:ss->" + dateExtend_Format(date1, "t HH:mm:ss"));
console.log("tt HH:mm:ss->" + dateExtend_Format(date1, "tt HH:mm:ss"));
console.log("ttt HH:mm:ss->" + dateExtend_Format(date1, "ttt HH:mm:ss"));
console.log("tttt HH:mm:ss->" + dateExtend_Format(date1, "tttt HH:mm:ss"));
    测试代码

    　　其实还应该注意一下使用环境，英文状态下这样肯定是有问题的……

    　　之后再改进……

    　　有点尴尬啊！昨天才弄上去，之后就发现bug,今天补一下，之前的写法不支持"yyyy-MM-dd ddd dddd"这样的写法，类似其中包含多个的……还有就是这里用到了一些ES6+的语法……
  • 相关阅读:
    Premiere Pro 2020 教程(二)
    程序员的10个好习惯(转自四猿外)
    HtmlAgilityPack 抓取页面的乱码处理
    【Python爬虫】 学习笔记 ajax下爬取豆瓣请求第一页
    【Python爬虫】 学习笔记 get请求的方法
    【Python爬虫】 学习笔记 post请求的方法
    【Python爬虫】 学习笔记 post请求的方法(Cookie反爬)
    jQuery选择器实例手册
    弹出模态窗口并传递数值
    java synchronized详解
  • 原文地址：https://www.cnblogs.com/du-blog/p/14237829.html
Copyright © 2011-2022 走看看