美文网首页
elementUI日期选择器格式问题

elementUI日期选择器格式问题

作者: 前端后台都不精 | 来源:发表于2019-04-15 09:49 被阅读0次

选择2019-04-15,发现向后台传递时日期格式为:



此为UTC时间格式,因为北京时间在东八区,比选择的日期会早八个小时。
后台为Java的Date格式,无法接受数据,因此需要将其格式化。
如果是element-ui2.0以上版本,可以直接在时间选择器的标签中加value-format属性格式化:

<el-date-picker type="date" v-model="form['launchDate']" placeholder="请选择上线日期" style="width:100%"
  value-format="yyyy-MM-dd"></el-date-picker>

如果element-ui版本过低,可以升级版本,或者将其手动格式化:

<el-date-picker type="date" v-model="form['launchDate']" placeholder="请选择上线日期" style="width:100%"
 @change="dateFormat"></el-date-picker>


<script>
dateFormat(time) {
this.form.launchDate = time;
}
</script>

传参“2019-04-19”,还是报错啊啊啊啊,后台Date格式无法接这个参数,看来得加上“00:00:00”的时分秒。看了一眼element-ui(1.4版本)日期选择器的说明,发现原来有个format属性啊擦



那就把代码改成这样:

<el-date-picker type="date" v-model="form['launchDate']" placeholder="请选择上线日期" style="width:100%"
  format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

然后发现。。。。传的还是UTC时间:



应该是form对象中的时间没有改变的缘故吧,那就把两个方法结合起来:
首先用format="yyyy-MM-dd HH:mm:ss"确定格式,然后在@change时将值赋给form对象中的日期属性:

<el-date-picker type="date" v-model="form['launchDate']" placeholder="请选择上线日期"
                              style="width:100%" format="yyyy-MM-dd HH:mm:ss" @change="lDateFormat"></el-date-picker>

<script>
oDateFormat(time) {
        this.form.outCompanyDate = time;
      }
</script>

终于成功了:


相关文章

网友评论

      本文标题:elementUI日期选择器格式问题

      本文链接:https://www.haomeiwen.com/subject/pzsywqtx.html