快捷導(dǎo)航

vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題

更新時(shí)間：2023年05月12日 14:29:10 作者：小憨憨不敢啊

這篇文章主要介紹了vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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 style="width:150px" :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 style="width:150px" :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類型，并不一定是date類型。要仔細(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í)間才是正確的。