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>