iView - DatePicker组件神坑，如何处理？

最近使用iView - DatePicker组件时发现一些问题，明明设置是正常的日期时间格式，当需要使用这个时间的时候，页面却显示 Fri Jun 09 2017 12:00:10 GMT+0800 (中国标准时间) ，见下面实例：

<template>
    <DatePicker v-model="time" type="datetime" 
                @on-change="time=$event"
                placeholder="Select date and time" ></DatePicker>
  
    <div>{{time}}</div>
</template>
<script>
    export default {
        data(){
          return {
            time:'2017-06-09 12:00:10'
          }
        }
    }
</script>

解决办法：DatePicker 组件的on-change事件返回值是格式化后的日期，可以使用类似于例子中@on-change="time=$event"赋值处理

上面只解决了一半，如果业务逻辑首次需要首次使用这个时间的时候，可以另外设置一个变量来保存数据格式不变，一个作为初次显示的值，看案例吧

<template>
    <DatePicker v-model="time" type="datetime" 
                @on-change="timedata=$event"
                placeholder="Select date and time" ></DatePicker>
  
    <div>{{time}}</div>
    <div>{{timedata}}</div>
</template>
<script>
    export default {
        data(){
          return {
            time:'', //作为首次显示的数据 GMT
            timedata:'2017-06-09 12:00:10' //作为处理的数据
          }
        },
        created(){
          this.init()
        },
        methods:{
          init(){
            this.time = this.timedata
          }
        }
    }
</script>

转载于:https://www.cnblogs.com/changxue/p/11055959.html