目錄

• vue DatePicker日期選擇器時(shí)差8小時(shí)
• vue中moment時(shí)間戳問(wèn)題(時(shí)區(qū)問(wèn)題)
• 總結(jié)

vue DatePicker日期選擇器時(shí)差8小時(shí)

vue中使用element-ui中的日期選擇器組件時(shí)，會(huì)造成時(shí)區(qū)差。

在向數(shù)據(jù)庫(kù)中做保存時(shí)發(fā)現(xiàn)傳輸?shù)臅r(shí)間參數(shù)和前端控件所選時(shí)間端不匹配（相差8小時(shí)）, 調(diào)試發(fā)現(xiàn)與后端接口沒(méi)有問(wèn)題，是控件本身的原因。

1.牽扯到國(guó)際時(shí)間和北京時(shí)間

2.中國(guó)國(guó)家標(biāo)準(zhǔn)時(shí)間是東經(jīng)120°（東八區(qū)）的地方時(shí)間,同格林威治時(shí)間（世界時(shí)）整整相差8小時(shí)

解決方法：

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

eg：

<el-table-column label="發(fā)證日期" 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="證書(shū)有效期" 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.溫馨提示：

在對(duì)日期做校驗(yàn)時(shí)同樣存在一個(gè)問(wèn)題，校驗(yàn)格式會(huì)提示·····不是日期格式的一串英文，這是因?yàn)榍岸伺c后臺(tái)格式不統(tǒng)一造成的，value-format和format格式要保持一致，而且有可能你的時(shí)間已經(jīng)是string類(lèi)型，并不一定是date類(lèi)型。要仔細(xì)檢查，我是被坑到了···

我的校驗(yàn)文件：

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

vue中moment時(shí)間戳問(wèn)題(時(shí)區(qū)問(wèn)題)

接手的vue項(xiàng)目中使用了moment模塊，導(dǎo)致出現(xiàn)了一些問(wèn)題。

北京時(shí)間 = UTC/GMT+8小時(shí)（東八區(qū)） ，世界標(biāo)準(zhǔn)時(shí)間加上8小時(shí)就是北京時(shí)間，今天踩到一個(gè)大坑，后端傳回來(lái)的時(shí)間戳是世界時(shí)間轉(zhuǎn)成的，當(dāng)我用當(dāng)前時(shí)間的時(shí)間戳減后端傳回的時(shí)間戳去計(jì)算時(shí)長(zhǎng)的時(shí)候發(fā)現(xiàn)不對(duì)勁，明明時(shí)長(zhǎng)只有40分鐘左右，計(jì)算出來(lái)的時(shí)長(zhǎng)卻是8小時(shí)40分鐘，后面才知道，后端傳回來(lái)的時(shí)間戳是世界時(shí)間轉(zhuǎn)成的。

所以我前端要把當(dāng)前時(shí)間戳減去8小時(shí)的時(shí)差再去減后端傳回來(lái)的時(shí)間戳。這樣計(jì)算出來(lái)的時(shí)間才是正確的。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持。