JavaScript 日期時間格式化

時間  2021-01-08
標籤 html c# ide 測試 spa code orm htm blog 欄目 JavaScript 简体版
原文   原文鏈接

　　上一篇筆記c#日期時間格式化打印了一下C#格式化日期時間，這裏在記錄一下JS版本。其實這就是重複造輪子了，有不少現成的類庫，例如：momentjs。可是有些時候又沒有引用這個類庫，沒有那麼複雜的需求，因此寫一個小方法就須要了。先看一下輸出記錄：html

 

格式c#

結果
(2021-01-03 06:07:08.009)ide

結果
(2021-11-22 15:36:48.678)測試

C#spa

JavaScriptcode

C#orm

JavaScripthtm

年相關blog

yip

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

 

/**
 * 格式化日期
 * 例子： 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+的語法……

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程