使用elementUI的時(shí)間選擇控件el-date-picker后骤视,作為參數(shù)上傳到后臺(tái)接收办绝,發(fā)現(xiàn)后臺(tái)時(shí)間比前臺(tái)時(shí)間少一天刽射。
場(chǎng)景:
<el-form-item label="開(kāi)始使用時(shí)間" prop="usedTime">
<el-date-picker v-model="formAdd.usedTime" type="date" placeholder="選擇日期"></el-date-picker>
</el-form-item>
例如我們選擇的時(shí)間是2020-06-03:
但提交到后端我們發(fā)現(xiàn)時(shí)間變了:
需要科普一個(gè)知識(shí):
el-date-picker默認(rèn)返回的是國(guó)際標(biāo)準(zhǔn)時(shí)間(GMT)
中國(guó)國(guó)家標(biāo)準(zhǔn)時(shí)間(UTC)是東經(jīng)120°(東八區(qū))的地方時(shí)間
同格林威治時(shí)間(即國(guó)際標(biāo)準(zhǔn)時(shí)間GMT)相差8小時(shí)
因此轻掩,若后端沒(méi)有幫忙轉(zhuǎn)換织咧,入庫(kù)時(shí)肯定是少一天的胀葱,需要自己手動(dòng)+8小時(shí)轉(zhuǎn)換,再提交到后端笙蒙,這個(gè)需要與后端協(xié)調(diào)好抵屿,看是他轉(zhuǎn)換還是你轉(zhuǎn)換。
解決辦法
1.若后端接收的類(lèi)型是字符串類(lèi)型:
在時(shí)間控件上添加指定日期格式的屬性value-format=“yyyy-MM-dd” 即可 捅位。這個(gè) yyyy-MM-dd 格式可自定義 參照element手冊(cè)
2.若后端接收的類(lèi)型是date類(lèi)型:
//this.formAdd.usedTime是時(shí)間控件綁定的時(shí)間
const data = this.formAdd.usedTime
//中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)化為時(shí)間戳
const timestamp = data.getTime();
console.log('timestamp', timestamp ); // > timestamp 1592928000000
附錄:
時(shí)間戳格式化 及 異常處理過(guò)濾 函數(shù)
/**
* 時(shí)間戳格式化
* @param {*} time 時(shí)間戳
* @param {*} cFormat 自定義時(shí)間格式 參數(shù): y年 m月 d日 h時(shí) i分 s秒 a星期 格式如:'{y}-{m}-nkvd2b5 {h}:{i}:{s}'
*/
parseTime(time, cFormat) {
if (time) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-2ubuyta {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
return value.toString().padStart(2, '0')
})
return time_str
} else {
return ""
}
}
/**
* 時(shí)間戳日期過(guò)濾
* @param {*} time 時(shí)間戳
* @param {*} cFormat 自定義時(shí)間格式 參數(shù): y年 m月 d日 h時(shí) i分 s秒 a星期 格式如:'{y}-{m}-dtppqhk {h}:{i}:{s}'
*/
let dataFormat = (time, cFormat) => {
//判斷后端是否傳空
if (typeof time === 'object') {
return '暫無(wú)'
}
//判斷后端是否幫我們轉(zhuǎn)換過(guò)了
if (typeof time === 'string' && time.length > 0) {
return time
}
//沒(méi)有再去轉(zhuǎn)換
let res = parseTime(time, cFormat)
let data = res.indexOf('NaN') > -1 ? '暫無(wú)' : res
return data
}