例如實現下面的計算:
計算天數時間差:
(new Date(離店時間) - new Date(入店時間))/(1000 * 60 * 60 * 24)
說明:默認初始值爲new Date()的當前時間,選擇離店時間後,進行天數的計算。例如當前時間是2019年12月31日,那住店時間是2019年的12月31日,離店時間是2020年的1月2日,正常的天數是2天,但是按照選中日期的時間差(new Date一下時間進行減法運算)除以1000 * 60 * 60 * 24計算的話就是1天,這是錯誤的。
這個錯誤產生的原因是初始值的賦值問題。因爲new Date()獲取到的時間是當前的日期的時分秒,把這個值作爲默認值賦給入店時間後,和選中的離店時間進行差值計算的話會有時間差,因爲選中的離店時間是該選中日期的東八區的時間,計算天數差會有時間差值的問題(例如,獲取當前時間的new Date()是下午的3點鐘,那麼進行差值計算的時候其實是不到兩天的,這樣計算就會出問題)。用toLocaleDateString()方法把時間轉爲字符串再new date()一下這個字符串的時間,獲取到的是該日期零點的時間,進行計算就會統一時間的時分秒,也就避免了天數計算的錯誤。
以上是問題的分析及解決方法說明,結束。下面的代碼的實現方法可以直接忽略,僅是自己筆記,回頭可直接用。
具體的操作如下:
頁面:
<div class="reality-detail">
<p @click="openPicker('come')">
<label class="reality-name" for="">入住日期</label>
<span class="reality-val">{{timeFormate(comeDate)}}</span>
<i class="iconfont icon-right"></i>
</p>
<p @click="openPicker('leave')">
<label class="reality-name" for="">離店日期</label>
<span class="reality-val">{{timeFormate(leaveDate)}}</span>
<i class="iconfont icon-right"></i>
</p>
<p>
<label class="reality-name" for="">住宿天數</label>
<span class="reality-val">{{stayDays}}</span>
</p>
</div>
組件:
<mt-datetime-picker
ref="picker"
type="date"
@confirm="handleConfirm"
v-model="pickerValue">
</mt-datetime-picker>
聲明變量:
data() {
return {
datalist: {},
trainOrderProducts: {},
operationControl:{},//操作按鈕
pickerValue:new Date(),//時間
comeDate:new Date(),//住店時間
leaveDate:new Date(new Date().getTime()+24*60*60*1000),//離店時間
pickerSign: 'come',//日期彈窗模式
stayDays:1,//住宿天數
}
},
js方法:
//時間轉換(月日)
timeFormate(time){
let dataTime = Tool.formate(new Date(time),'yyyy/MM/dd');
return dataTime;
},
//日期彈窗
openPicker(sign) {
this.pickerSign = sign;
this.pickerValue = sign=='come'?this.comeDate:this.leaveDate;
this.$refs.picker.open();
},
//確定
handleConfirm(){
let come = new Date(this.comeDate).toLocaleDateString();
let leave = new Date(this.leaveDate).toLocaleDateString();
let current = new Date().toLocaleDateString();
if(this.pickerSign == 'come'){
if(this.pickerValue<current){
Tool.tip("入住日期不能早於當前日期!")
return
}
this.comeDate = this.timeFormate(this.pickerValue);
this.leaveDate = this.timeFormate(new Date(this.pickerValue.getTime()+24*60*60*1000));
come = new Date(this.comeDate).toLocaleDateString();
leave = new Date(this.leaveDate).toLocaleDateString();
}else{
//離店時間
if(new Date(come)>=this.pickerValue){
Tool.tip("離店日期不能早於入住日期!")
return
}
this.leaveDate = this.timeFormate(this.pickerValue);
leave = new Date(this.leaveDate).toLocaleDateString();
}
this.stayDays = (new Date(leave) - new Date(come))/(1000 * 60 * 60 * 24);
},