1 前言
1.1 業(yè)務(wù)場(chǎng)景
JavaScript計(jì)算兩個(gè)時(shí)間相隔了 多少年多少月多少日柳击。時(shí)分秒這里不作考慮弥雹。
2 實(shí)現(xiàn)原理
2.1 獲取當(dāng)前時(shí)間
若需要和當(dāng)前時(shí)間比較鹦筹，這里提供當(dāng)前時(shí)間的獲取格式化方法秋秤。我這里是根據(jù)傳入類(lèi)型輸出日期或者日期+時(shí)間介衔，可以明顯看出type為day時(shí)恨胚，輸出日期。
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比較時(shí)間
傳入兩個(gè)參數(shù)炎咖，格式如：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);
//計(jì)算相差的年份
/*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;
}
//計(jì)算月份
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;
}
}
//計(jì)算天數(shù)
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}
},
返回的結(jié)果是一個(gè)對(duì)象赃泡，包含了y m d三個(gè)屬性，可根據(jù)業(yè)務(wù)進(jìn)行取用展示乘盼。
比較時(shí)間的時(shí)候升熊，若sDate1為小的時(shí)間，這里直接返回past绸栅。
2.3 頁(yè)面展示
這里根據(jù)業(yè)務(wù)不同可以作不同的展示级野。這里列出自己的Vue展示處理展示。
其中this.dataForm.hasdata為頁(yè)面的v-model粹胯。這樣的處理的效果是觀看直觀蓖柔。
let now = this.getNowDate('day')
let diffDate = this.getDiffYmdBetweenDate(now,this.data)
let hasdata = ''
if(diffDate == 'past'){
this.dataForm.hasdata = '已過(guò)期'
} 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 頁(yè)面效果
image
image
image
3 后記
感謝支持辰企。若不足之處，歡迎大家指出，共勉。
如果覺(jué)得不錯(cuò)劳吠，記得 點(diǎn)贊 ，謝謝大家 ??
歡迎關(guān)注 我的： 【Github】【掘金】【簡(jiǎn)書(shū)】【CSDN】【OSCHINA】【SF】
3.1 參考資料
3.2 時(shí)間處理js庫(kù)
這里列舉幾個(gè)js庫(kù)備查找使用十减，排序無(wú)意義。
- moment
- day
- date-fns
- miment
本文章采用 知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際許可協(xié)議 進(jìn)行許可愤估。
