JavaScript 日期时间格式化

  • A+
所属分类:Web前端
摘要

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

  上一篇笔记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,下面看一下代码:

JavaScript 日期时间格式化JavaScript 日期时间格式化

/**  * 格式化日期  * 例子: 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) {     var 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) {         var retStr = millisecond0.toString().padStart(3, "0");         if (matchLength > 3) {             retStr = retStr.padEnd(matchLength, "0");         } else {             retStr = retStr.substr(0, matchLength);         }         return retStr;     }     var o = {         "y+": function (matchLength) {             // y和yyy都返回1999             var 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) {             var 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) {             var 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) {             var retStr = hour0 > 12 ? (hour0 - 12).toString() : hour0.toString();             if (matchLength > 1) {                 retStr = retStr.padStart(2, "0");             }             return retStr;         },         "H+": function (matchLength) {             var retStr = hour0.toString();             if (matchLength > 1) {                 retStr = retStr.padStart(2, "0");             }             return retStr;         },         "m+": function (matchLength) {             var retStr = minute0.toString();             if (matchLength > 1) {                 retStr = retStr.padStart(2, "0");             }             return retStr;         },         "s+": function (matchLength) {             var retStr = second0.toString();             if (matchLength > 1) {                 retStr = retStr.padStart(2, "0");             }             return retStr;         },         "S+": handleMillisecond,         "f+": handleMillisecond,         "t+": function (matchLength) {             var 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 (var k in o) {         if (new RegExp("(" + k + ")").test(format)) {             format = format.replace(RegExp.$1, o[k](RegExp.$1.length));         }     }     return format; }

View Code

JavaScript 日期时间格式化JavaScript 日期时间格式化

//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"));

测试代码

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

  之后再改进……