JavaScript之Date日期对象扩展

Posted 2020-06-30

一、前言

　　javascript Date对象提供了诸多日期相关属性以及操作日期的相关方法，为开发网站带来了许多方便。然而，大部分web页面展示给用户的日期格式可能是这样：yyyy-MM-dd hh:mm:ss（类似于c# java的ToString()）。

　　不论是JavaScript Date对象的toString()方法，还是JavaScript Date对象的toGMTString()、toISOString()、toLocaleDateString()等方法，都无法转化成我们平时开发中想要的日期字符串格式；同时，关于日期相加减运算访求的封装，JavaScript Date对象也提供；那么，问题来了，我们平时编码过程中需要进行日期相关运算的时候，该怎么办呢？最佳途径就是，自己动手封装平时经常用到的日期处理函数，下面的代码就是本人在开发过程中封装的一些简单而用实用的日期处理函数。在未来的开发过程中，我会不断的完善、扩展及优化这些日期处理函数。

二、代码

  1 //名称：日期加法函数
  2 //参数：part(year、month、day、hour、minute、second、millisecond)
  3 //返回：Date对象
  4 Date.prototype.add = function (part, value) {
  5     if (!value || isNaN(value)) value = 0;
  6     switch (part) {
  7         case "year":
  8             this.setFullYear(this.getFullYear() + value);
  9             break;
 10         case "month":
 11             this.setMonth(this.getMonth() + value);
 12             break;
 13         case "day":
 14             this.setDate(this.getDate() + value);
 15             break;
 16         case "hour":
 17             this.setHours(this.getHours() + value);
 18             break;
 19         case "minute":
 20             this.setMinutes(this.getMinutes() + value);
 21             break;
 22         case "second":
 23             this.setSeconds(this.getSeconds() + value);
 24             break;
 25         case "millisecond":
 26             this.setMilliseconds(this.getMilliseconds() + value);
 27             break;
 28         default:
 29     }
 30     return this;
 31 };
 32 
 33 Date.prototype.addYears = function (value) {
 34     if (!value || isNaN(value)) value = 0;
 35     this.setFullYear(this.getFullYear() + value);
 36     return this;
 37 };
 38 
 39 Date.prototype.addMonths = function (value) {
 40     if (!value || isNaN(value)) value = 0;
 41     this.setMonth(this.getMonth() + value);
 42     return this;
 43 };
 44 
 45 Date.prototype.addDays = function (value) {
 46     if (!value || isNaN(value)) value = 0;
 47     this.setDate(this.getDate() + value);
 48     return this;
 49 };
 50 
 51 Date.prototype.addHours = function (value) {
 52     if (!value || isNaN(value)) value = 0;
 53     this.setHours(this.getHours() + value);
 54     return this;
 55 };
 56 
 57 Date.prototype.addMinutes = function (value) {
 58     if (!value || isNaN(value)) value = 0;
 59     this.setMinutes(this.getMinutes() + value);
 60     return this;
 61 };
 62 
 63 Date.prototype.addSeconds = function (value) {
 64     if (!value || isNaN(value)) value = 0;
 65     this.setSeconds(this.getSeconds() + value);
 66     return this;
 67 };
 68 
 69 Date.prototype.addMilliseconds = function (value) {
 70     if (!value || isNaN(value)) value = 0;
 71     this.setMilliseconds(this.getMilliseconds() + value);
 72     return this;
 73 };
 74 
 75 //名称：日期加法函数
 76 //参数：time(日期字符串，示例：12:00:00)
 77 //返回：Date对象
 78 Date.prototype.addTime = function (time) {
 79     var timeRegex = /^([0-1]?\d|2[0-3])(:[0-5]?\d){1,2}$/g;
 80     if (timeRegex.test(time)) {
 81         var value = Date.parse("1970/1/1 " + time) - Date.parse("1970/1/1");
 82         this.setMilliseconds(this.getMilliseconds() + value);
 83     }
 84     return this;
 85 };
 86 
 87 //名称：日期格式化函数
 88 //参数：format(示例：yyyy-MM-dd hh:mm:ss)、zeroize(是否补零)
 89 //返回：日期字符串
 90 Date.prototype.toCustomString = function (format, zeroize) {
 91     if (!zeroize) zeroize = false;
 92     var dy = this.getFullYear();
 93     var dM = this.getMonth() + 1;
 94     var dd = this.getDate();
 95     var dh = this.getHours();
 96     var dm = this.getMinutes();
 97     var ds = this.getSeconds();
 98     var dS = this.getMilliseconds();
 99     var orm = {
100         "y+": dy.toString(),
101         "M+": !zeroize ? dM.toString() : dM < 10 ? ‘0‘ + dM : dM.toString(),
102         "d+": !zeroize ? dd.toString() : dd < 10 ? ‘0‘ + dd : dd.toString(),
103         "h+": !zeroize ? dh.toString() : dh < 10 ? ‘0‘ + dh : dh.toString(),
104         "m+": !zeroize ? dm.toString() : dm < 10 ? ‘0‘ + dm : dm.toString(),
105         "s+": !zeroize ? ds.toString() : ds < 10 ? ‘0‘ + ds : ds.toString(),
106         "S": dS.toString()
107     };
108     for (var i in orm) {
109         var patt = new RegExp(i);
110         if (patt.test(format)) {
111             var item = orm[i];
112             var ms = format.match(patt);
113             var result = ms[0];
114             if (i === "S") {
115                 format = format.replace(result, item);
116             } else {
117                 format = format.replace(result, item.substr(item.length - result.length));
118             }
119         }
120     }
121     return format;
122 };

View Code

三、分析

1.add函数：此函数的第一个参数提供了日期需要进行运算的部分（year、month、day、hour、minute、second、millisecond），返回日期对象；

2.add##函数：类似于addYear、addMonth、addDays等函数，即是对add函数的分解，为日期处理提供了更为方便快捷的功能；

3.addTime函数：此函数提供了日期对象类型与时间字符串类型运算的功能，time参数为时间字符串（示例：10:00:00）；

4.toCustomString函数：此函数提供了日期对象类型转化成指定格式的日期字符串，format为日期格式化字符串参数（示例：yyyy-MM-dd hh:mm:ss）；

以下示例中，示例1、示例2演示了add函数、add##函数的使用；示例3演示了addTime函数的使用。

三个示例中均用到toCustomString函数对结果进行格式化输出。

 1 //示例1：d1数据类型为整形，日期毫秒数
 2 var d1 = Date.now();
 3 var ret1 = new Date(d1).add("year", 2);//或者：var ret1 = new Date(d1).addYear(2);            
 4 console.log(ret1.toCustomString("yyyy-MM-dd hh:mm:ss"));
 5 //打印：2018-3-28 19:15:45
 6 
 7 //示例2：d2数据类型为字符串型，日期字符串
 8 var d2 = "2016-1-1 12:00:00";
 9 var ret2 = new Date(Date.parse(d2)).add("day", 10);//或者：var ret2 = new Date(Date.parse(d2)).addDays(10);            
10 console.log(ret2.toCustomString("yyyy/MM/dd hh时mm分ss秒", true));
11 //打印：2016/01/11 12时00分00秒
12 
13 //示例3：日期类型与时间字符串类型的运算
14 var ret3 = new Date(Date.now()).addTime("2:10:00");
15 console.log(ret3.toCustomString("yyyy-MM-dd hh:mm:ss", true));
16 //打印：2016-03-28 21:25:45

View Code