1 前言
1.1 业务场景
JavaScript计算两个时间相隔了 多少年多少月多少日。时分秒这里不作考虑。
2 实现原理
2.1 获取当前时间
若需要和当前时间比较，这里提供当前时间的获取格式化方法。我这里是根据传入类型输出日期或者日期+时间，可以明显看出type为day时，输出日期。
getNowDate(type){ let now = new Date() let year = now.getFullYear() let month = now.getMonth() + 1 let day = now.getDate() let hh = now.getHours() let mm = now.getMinutes() let ss = now.getSeconds() month = month < 10 ? '0'+ month : month day = day < 10 ? '0'+ day : day if(type == 'day'){ return year +'-'+ month +'-'+ day } else { return year +'-'+ month +'-'+ day + ' '+ hh + ':' + mm + ':' + ss }},2.2比较时间
传入两个参数，格式如：2008-08-08
getDiffYmdBetweenDate(sDate1,sDate2){ var fixDate = function(sDate){ var aD = sDate.split('-'); for(var i = 0; i < aD.length; i++){ aD[i] = fixZero(parseInt(aD[i])); } return aD.join('-'); }; var fixZero = function(n){ return n < 10 ? '0'+n : n; }; var fixInt = function(a){ for(var i = 0; i < a.length; i++){ a[i] = parseInt(a[i]); } return a; }; var getMonthDays = function(y,m){ var aMonthDays = [0,31,28,31,30,31,30,31,31,30,31,30,31]; if((y%400 == 0) || (y%4==0 && y%100!=0)){ aMonthDays[2] = 29; } return aMonthDays[m]; }; var checkDate = function(sDate){ }; var y = 0; var m = 0; var d = 0; var sTmp; var aTmp; sDate1 = fixDate(sDate1); sDate2 = fixDate(sDate2); if(sDate1 > sDate2){ return 'past' } var aDate1 = sDate1.split('-'); aDate1 = fixInt(aDate1); var aDate2 = sDate2.split('-'); aDate2 = fixInt(aDate2); //计算相差的年份 /*aTmp = [aDate1[0]+1,fixZero(aDate1[1]),fixZero(aDate1[2])]; while(aTmp.join('-') <= sDate2){ y++; aTmp[0]++; }*/ y = aDate2[0] - aDate1[0]; if( sDate2.replace(aDate2[0],'') < sDate1.replace(aDate1[0],'')){ y = y - 1; } //计算月份 aTmp = [aDate1[0]+y,aDate1[1],fixZero(aDate1[2])]; while(true){ if(aTmp[1] == 12){ aTmp[0]++; aTmp[1] = 1; }else{ aTmp[1]++; } if(([aTmp[0],fixZero(aTmp[1]),aTmp[2]]).join('-') <= sDate2){ m++; } else { break; } } //计算天数 aTmp = [aDate1[0]+y,aDate1[1]+m,aDate1[2]]; if(aTmp[1] > 12){ aTmp[0]++; aTmp[1] -= 12; } while(true){ if(aTmp[2] == getMonthDays(aTmp[0],aTmp[1])){ aTmp[1]++; aTmp[2] = 1; } else { aTmp[2]++; } sTmp = ([aTmp[0],fixZero(aTmp[1]),fixZero(aTmp[2])]).join('-'); if(sTmp <= sDate2){ d++; } else { break; } } return {y:y,m:m,d:d}},返回的结果是一个对象，包含了y m d三个属性，可根据业务进行取用展示。
比较时间的时候，若sDate1为小的时间，这里直接返回past。
2.3 页面展示
这里根据业务不同可以作不同的展示。这里列出自己的Vue展示处理展示。
其中this.dataForm.hasdata为页面的v-model。这样的处理的效果是观看直观。
let now = this.getNowDate('day')let diffDate = this.getDiffYmdBetweenDate(now,this.data)let hasdata = ''if(diffDate == 'past'){ this.dataForm.hasdata = '已过期'} else { if(diffDate.y > 0){ hasdata += diffDate.y + '年' + diffDate.m + '月' } else if (diffDate.y == 0) { if(diffDate.m > 0){ hasdata += diffDate.m + '月' } } this.dataForm.hasdata = hasdata + diffDate.d + '日'}2.4 页面效果
3 后记
感谢支持。若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得点赞 ，谢谢大家 ????
欢迎关注 我的： Github 掘金 简书
3.1 参考资料
- www.itkeyword.com/doc/...
3.2 时间处理js库
这里列举几个js库备查找使用，排序无意义。
- moment
- day
- date-fns
- miment