vue DatePicker日期選擇器時差8小時問題
目錄
- vue DatePicker日期選擇器時差8小時
- vue中moment時間戳問題(時區(qū)問題)
- 總結(jié)
vue DatePicker日期選擇器時差8小時
vue中使用element-ui中的日期選擇器組件時,會造成時區(qū)差。
在向數(shù)據(jù)庫中做保存時發(fā)現(xiàn)傳輸?shù)臅r間參數(shù)和前端控件所選時間端不匹配(相差8小時), 調(diào)試發(fā)現(xiàn)與后端接口沒有問題,是控件本身的原因。
1.牽扯到國際時間和北京時間
2.中國國家標準時間是東經(jīng)120°(東八區(qū))的地方時間,同格林威治時間(世界時)整整相差8小時
解決方法:
設(shè)置value-format 屬性, 精確到時間段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="證書有效期" 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.溫馨提示:
在對日期做校驗時同樣存在一個問題,校驗格式會提示·····不是日期格式的一串英文,這是因為前端與后臺格式不統(tǒng)一造成的,value-format和format格式要保持一致,而且有可能你的時間已經(jīng)是string類型,并不一定是date類型。要仔細檢查,我是被坑到了···
我的校驗文件:
fzrq: [ { type: "string", required: true, message: "發(fā)證日期不可為空", trigger: "change", pattern: /.+/, }, ], zsyxq: [ { type: "string", required: true, message: "證書有效期不可為空", trigger: "change", pattern: /.+/, }, ],
vue中moment時間戳問題(時區(qū)問題)
接手的vue項目中使用了moment模塊,導致出現(xiàn)了一些問題。
北京時間 = UTC/GMT+8小時(東八區(qū)) ,世界標準時間加上8小時就是北京時間,今天踩到一個大坑,后端傳回來的時間戳是世界時間轉(zhuǎn)成的,當我用當前時間的時間戳減后端傳回的時間戳去計算時長的時候發(fā)現(xiàn)不對勁,明明時長只有40分鐘左右,計算出來的時長卻是8小時40分鐘,后面才知道,后端傳回來的時間戳是世界時間轉(zhuǎn)成的。
所以我前端要把當前時間戳減去8小時的時差再去減后端傳回來的時間戳。這樣計算出來的時間才是正確的。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持。
相關(guān)文章:
