js默認當前日期爲開始時間時進行天數計算出錯的原因分析及解決方法(vue使用mintui內的時間組件)

例如實現下面的計算:
在這裏插入圖片描述

計算天數時間差:
(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);
},
發佈了90 篇原創文章 · 獲贊 35 · 訪問量 38萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章