解決el-date-picker日期選擇控件少一天的問題

更新時(shí)間：2022年10月12日 08:52:35 作者：小仙女de成長

這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

選擇的日期和存入的日期差一天的原因

這個(gè)是由于element-ui中時(shí)間控件的默認(rèn)時(shí)間為國際標(biāo)準(zhǔn)時(shí)間，因此與北京時(shí)間差8個(gè)小時(shí)。

解決方法

在以下代碼中增加value-format="yyyy-MM-dd"語句

vue時(shí)間控件中獲取時(shí)間少一天的問題匯總

1、

<el-form :inline="true" class="demo-form-inline padding-top-20">?
<el-form-item label="年份"> <div class="block">?
<el-date-picker?
v-model="searchYear"
type="daterange"?
align="right"?
value-format="yyyy-MM-dd"?
unlink-panels range-separator="至" start-placeholder="開始日期"?
end-placeholder="結(jié)束日期"?
:picker-options="Shortcut">
</el-date-picker>
</div>
</el-form-item>

需要加入

value-format=“yyyy-MM-dd” 這個(gè)就可以了，我選擇的是年月日

2、通過@on-change事件來綁定

?<DatePicker type="date" @on-change="getStartTime" placeholder="選擇日期" style="width: 200px">
?</DatePicker>

getStartTime: function (starTime) {
? console.log(startTime)
},

3、直接@on-change=“date=$event”,date是data里的數(shù)據(jù)名

<DatePicker
@on-change="search.activityTime=$event"?
type="date"
placeholder="Select date"
style="width: 200px"
></DatePicker>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在 React、Vue項(xiàng)目中使用SVG的方法
本篇文章主要介紹了在 React、Vue項(xiàng)目中使用SVG的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
vue項(xiàng)目網(wǎng)站全局置灰功能實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue項(xiàng)目網(wǎng)站全局置灰功能實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊思路詳解
這篇文章主要介紹了Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊,實(shí)現(xiàn)思路大概是通過加一個(gè)本地緩存的時(shí)間戳，通過時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧
2023-12-12
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
webstorm添加vue.js支持的方法教程
因?yàn)楸救耸褂玫氖莣ebstorm2016 2.3版本，結(jié)果竟然不支持vue文件，所以找到了一個(gè)解決方法，下面這篇文章主要給大家介紹了關(guān)于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
Vue3中導(dǎo)航守衛(wèi)的使用教程
在Vue3中,導(dǎo)航守衛(wèi)（Navigation Guards）用于在路由切換前后執(zhí)行一些操作,例如驗(yàn)證用戶權(quán)限、取消路由導(dǎo)航等,本文主要為大家介紹了vue3中導(dǎo)航守衛(wèi)的使用方法,需要的可以參考下
2023-08-08
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
vue keep-alive的簡(jiǎn)單總結(jié)
這篇文章主要介紹了vue中的keep-alive的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能
這篇文章主要介紹了Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題
這篇文章主要介紹了Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07