最近公司項(xiàng)目用到了Vue.js混驰，和它一塊的是ElementUI控件碌奉。當(dāng)使用ElementUI的日期選擇器DatePicker時(shí)俊性，發(fā)現(xiàn)后臺(tái)數(shù)據(jù)庫(kù)中存的時(shí)間總是和想要的時(shí)間差8個(gè)小時(shí)蝇狼，開(kāi)始以為是數(shù)據(jù)庫(kù)時(shí)區(qū)的問(wèn)題。后來(lái)才發(fā)現(xiàn)是ElementUI日期控件的問(wèn)題抗果。自己選好的日期筋帖，和DatePicker綁定的值總是差8個(gè)小時(shí)≡┝螅看了下官方屬性介紹日麸，發(fā)現(xiàn)使用value-format可以解決這個(gè)問(wèn)題。代碼如下：
<el-date-picker @change="timeChange()"
v-model="addData.during"
value-format="yyyy-MM-dd-hh-mm-ss"
type="datetimerange"
range-separator="至"
start-placeholder="開(kāi)始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
這里需要注意一下宿接，value-format是elementUI2.x版本才有的屬性赘淮，在早期的1.x版本里面是不存在的辕录。如果你用的是早期的版本要解決這個(gè)問(wèn)題就需要自己寫(xiě)轉(zhuǎn)換了睦霎，前端和后端都行。哪個(gè)方便按哪個(gè)來(lái)走诞。
原文來(lái)自：http://www.mamicode.com/info-detail-2384644.html
分割線副女，2018.10.23日更新
其實(shí)上面的文章只是解決了我的時(shí)差的問(wèn)題，但是我的項(xiàng)目里面還有一個(gè)需求：end-time-start-time>60min
而用到的value-format只是得到一個(gè)value值蚣旱，需要用到date.parse(time)這個(gè)函數(shù)碑幅，將時(shí)間轉(zhuǎn)化為時(shí)間戳，其中的time的格式一定要注意塞绿，如果像上面的value-format="yyyy-MM-dd-hh-mm-ss"那么加減得到的值一直都是NAN沟涨，正確的格式是：value-format="yyyy-MM-dd HH:mm:ss"再運(yùn)用轉(zhuǎn)化時(shí)間戳函數(shù)，就可以得到你想要的時(shí)差异吻。
