vue DatePicker日期選擇器時差8小時問題

目錄

• vue DatePicker日期選擇器時差8小時
• vue中moment時間戳問題(時區問題)
• 總結

vue DatePicker日期選擇器時差8小時

vue中使用element-ui中的日期選擇器組件時，會造成時區差。

在向數據庫中做保存時發現傳輸的時間參數和前端控件所選時間端不匹配（相差8小時）, 調試發現與后端接口沒有問題，是控件本身的原因。

1.牽扯到國際時間和北京時間

2.中國國家標準時間是東經120°（東八區）的地方時間,同格林威治時間（世界時）整整相差8小時

解決方法：

設置value-format 屬性, 精確到時間段value-format=“yyyy-MM-dd HH” 即可.

eg：

<el-table-column label="發證日期" align="center" min-width="150">
									<template slot-scope="scope">
										<el-form-item :prop=""tableData."+scope.$index+".fzrq"" :rules="ZZrules.fzrq">
											<el-date-picker :picker-options="FZTime" v-model="scope.row.fzrq"
												@change="startTimeStatus($event)" type="date" value-format="yyyy/MM/dd" format="yyyy/MM/dd"
												placeholder="選擇日期" clearable>
											</el-date-picker>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="證書有效期" align="center" min-width="150">
									<template slot-scope="scope">
										<el-form-item :prop=""tableData."+scope.$index+".zsyxq"" :rules="ZZrules.zsyxq">
											<el-date-picker :picker-options="YXQTime" v-model="scope.row.zsyxq"
												type="date" @change="endStatus($event)" value-format="yyyy/MM/dd" format="yyyy/MM/dd"
												placeholder="選擇日期" clearable>
											</el-date-picker>
										</el-form-item>
									</template>
		     </el-table-column>

3.溫馨提示：

在對日期做校驗時同樣存在一個問題，校驗格式會提示·····不是日期格式的一串英文，這是因為前端與后臺格式不統一造成的，value-format和format格式要保持一致，而且有可能你的時間已經是string類型，并不一定是date類型。要仔細檢查，我是被坑到了···

我的校驗文件：

fzrq: [
			{
				type: "string",
				required: true,
				message: "發證日期不可為空",
				trigger: "change",
				pattern: /.+/,
			},
		],
		zsyxq: [
			{
				type: "string",
				required: true,
				message: "證書有效期不可為空",
				trigger: "change",
				pattern: /.+/,
			},
		],

vue中moment時間戳問題(時區問題)

接手的vue項目中使用了moment模塊，導致出現了一些問題。

北京時間 = UTC/GMT+8小時（東八區） ，世界標準時間加上8小時就是北京時間，今天踩到一個大坑，后端傳回來的時間戳是世界時間轉成的，當我用當前時間的時間戳減后端傳回的時間戳去計算時長的時候發現不對勁，明明時長只有40分鐘左右，計算出來的時長卻是8小時40分鐘，后面才知道，后端傳回來的時間戳是世界時間轉成的。

所以我前端要把當前時間戳減去8小時的時差再去減后端傳回來的時間戳。這樣計算出來的時間才是正確的。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。