日期和和時(shí)間插件均寫在input框中,因?yàn)橐蚝蠖税l(fā)送Ajax請(qǐng)求,將input中的日期和時(shí)間
發(fā)送至后端進(jìn)行交互,我是這樣配置的,如下:?
日期插件:? <el-date-picker?
? v-model="calendar.date"
? type="date"
? placeholder="選擇日期" style="width:100%"></el-date-picker>
時(shí)間插件:
<el-date-picker?
? v-model="calendar.time"
? type="date"
? placeholder="選擇日期" style="width:100%"></el-date-picker>
v-model綁定的值均是vue中data的數(shù)據(jù):
data() {
calendar:{date:' ',time:' '}
如此配置與后臺(tái)交互時(shí),提示錯(cuò)誤,發(fā)現(xiàn)經(jīng)過(guò)console,發(fā)現(xiàn)傳入的時(shí)間與日期格式有問(wèn)題,如下:
而后臺(tái)要求的日期格式是: 'yyyy-MM-dd' ,時(shí)間格式是: 'HH-mm'.最后在官方文檔查到需要做如下配置
在el-date-picker中加入value-format="yyyy-MM-dd" 屬性,意思為當(dāng)前的時(shí)間綁定值得格式為yyyy-MM-dd,
在el-time-picker中加入value-format="HH:mm" 屬性,意思為當(dāng)前的時(shí)間綁定值得格式為yyyy-MM-dd,
我最終的日期配置為: <el-date-picker?
? v-model="calendar.date"
? value-format="yyyy-MM-dd" //??當(dāng)前的時(shí)間綁定值得格式, 可以console出this.calendar.time = yyyy-MM-dd格式
? type="date"? //??這個(gè)屬性是,選時(shí)間時(shí)的格式,,以及選定時(shí)間后在當(dāng)前input框中顯示的日期格式
? placeholder="選擇日期" style="width:100%">
時(shí)間配置為: <el-time-picker
? v-model="calendar.time"
? value-format="HH:mm" //?當(dāng)前的時(shí)間綁定值得格式, 可以console出this.calendar.time = HH:mm格式
? format="HH:mm" // 這個(gè)屬性是,選時(shí)間時(shí)的格式,,以及選定時(shí)間后在當(dāng)前input框中顯示的時(shí)間格式
? :picker-options="{
selectableRange:'00:00:00 - 23:59:00'
? ? }"
? placeholder="選擇時(shí)間" style="width:100%">
記錄下自己遇到的坑,若能幫到他人,榮幸之至
轉(zhuǎn)載請(qǐng)標(biāo)明出處~~謝謝
