Vue中使用Element-Ui插件日期时间格式问题

日期和和时间插件均写在input框中,因为要向后端发送Ajax请求,将input中的日期和时间

发送至后端进行交互,我是这样配置的,如下: 

日期插件: 

  v-model="calendar.date"

  type="date"

  placeholder="选择日期" style="width:100%">

时间插件:

  v-model="calendar.time"

  type="date"

  placeholder="选择日期" style="width:100%">

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,

我最终的日期配置为:

  v-model="calendar.date"

  value-format="yyyy-MM-dd" //  当前的时间绑定值得格式, 可以console出this.calendar.time = yyyy-MM-dd格式

  type="date"  //  这个属性是,选时间时的格式,,以及选定时间后在当前input框中显示的日期格式

  placeholder="选择日期" style="width:100%">

时间配置为:

  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%">

记录下自己遇到的坑,若能帮到他人,荣幸之至

转载请标明出处~~谢谢