關(guān)于ELement?UI時(shí)間控件el-date-picker誤差8小時(shí)的問題
更新時(shí)間：2024年08月09日 10:58:10 作者：xuelong-ming
本文探討了在使用Vue前端框架配合ElementUI開發(fā)時(shí),遇到日期時(shí)間選擇器DateTimePicker的時(shí)間同步問題,通過揭示中國(guó)東八區(qū)與格林威治時(shí)間的時(shí)差,作者提供了設(shè)置value-format屬性的解決方案,以確保后端接收到的正確時(shí)間格式
問題
前端使用框架與UI：Vue+ElementUI。
在項(xiàng)目開發(fā)中使用到了DateTimePicker組件，在選擇時(shí)間后點(diǎn)擊查詢發(fā)現(xiàn)查詢導(dǎo)的內(nèi)容與預(yù)期內(nèi)容有所偏差，之后發(fā)現(xiàn)前端選中的時(shí)間在后端接收時(shí)相差了八個(gè)小時(shí)。
原因
我們國(guó)家的標(biāo)準(zhǔn)時(shí)間是東經(jīng)120°時(shí)間（東八區(qū)），而標(biāo)準(zhǔn)時(shí)間是格林威治時(shí)間（世界時(shí)），兩者相差了整整8小時(shí)。
解決
需要設(shè)置value-format屬性，value-format=“yyyy-MM-dd HH:mm:ss”。
<div class="block">
<el-date-picker
v-model="value1"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
</div>到此這篇關(guān)于ELement UI時(shí)間控件el-date-picker誤差8小時(shí)的文章就介紹到這了,更多相關(guān)ELement UI el-date-picker誤差8小時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
- iview日期控件,雙向綁定日期格式的方法
- ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
- element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)
- el-date-picker 如何限制選擇六個(gè)月內(nèi)的日期
- element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)
- iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
相關(guān)文章
ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了修改Vue項(xiàng)目運(yùn)行的IP和端口，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了vue 圖片裁剪上傳組件的實(shí)現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
這篇文章主要介紹了Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3項(xiàng)目中引入ElementUI并使用的示例詳解
ElementUI是一個(gè)強(qiáng)大的PC端UI組件框架，它不依賴于vue，但是卻是當(dāng)前和vue配合做項(xiàng)目開發(fā)的一個(gè)比較好的ui框架，本文主要介紹了如何在vue3中引入使用ElementUI，需要的可以參考一下2023-06-06