日期和和时间插件均写在input框中,因为要向后端发送Ajax请求,将input中的日期和时间
发送至后端进行交互,我是这样配置的,如下:
日期插件: <el-date-picker
v-model="calendar.date"
type="date"
placeholder="选择日期" style="width:100%"></el-date-picker>
时间插件:
<el-date-picker
v-model="calendar.time"
type="date"
placeholder="选择日期" style="width:100%"></el-date-picker>
v-model绑定的值均是vue中data的数据:
data() {
calendar:{date:' ',time:' '}
如此配置与后台交互时,提示错误,发现经过console,发现传入的时间与日期格式有问题,如下:
而后台要求的日期格式是: 'yyyy-MM-dd' ,时间格式是: 'HH-mm'.最后在官方文档查到需要做如下配置
在el-date-picker中加入value-format="yyyy-MM-dd" 属性,意思为当前的时间绑定值得格式为yyyy-MM-dd,
在el-time-picker中加入value-format="HH:mm" 属性,意思为当前的时间绑定值得格式为yyyy-MM-dd,
我最终的日期配置为: <el-date-picker
v-model="calendar.date"
value-format="yyyy-MM-dd" // 当前的时间绑定值得格式, 可以console出this.calendar.time = yyyy-MM-dd格式
type="date" // 这个属性是,选时间时的格式,,以及选定时间后在当前input框中显示的日期格式
placeholder="选择日期" style="width:100%">
时间配置为: <el-time-picker
v-model="calendar.time"
value-format="HH:mm" // 当前的时间绑定值得格式, 可以console出this.calendar.time = HH:mm格式
format="HH:mm" // 这个属性是,选时间时的格式,,以及选定时间后在当前input框中显示的时间格式
:picker-options="{
selectableRange:'00:00:00 - 23:59:00'
}"
placeholder="选择时间" style="width:100%">
记录下自己遇到的坑,若能帮到他人,荣幸之至
转载请标明出处~~谢谢
网友评论