最近在用iView配合Vue挖坑，在做到表单的控件的时候，发现使用iView的日期选择器（Date-Picker）绑定的时间与当前的时间不同。
<Date-picker
v-else-if="formContent.type=='datetime'"
type="datetime" format="yyyy-MM-dd HH:mm"
placeholder="请选择日期..." :v-model="formContent.value"
></Date-picker>
从上图中可以看出，通过
v-model方法进行绑定，我们在控件中选择的时间与实际绑定的时间差了大约8个小时。8个小时……是不是有点熟悉？对了，就是UTC时间（格林尼治标准时间）。
看了GitHub上相关的issue发现作者可能是想国际化一点。然而在业务方面，感觉使用本土时间会更加方便一点。所以，我们就不能使用v-model方法来绑定了。
那么表单的内容又该怎么解决呢？查阅官方网站，发现Date-Picker控件有一个on-change事件，并且on-change时间的返回值恰好就是我们所要的本地时间，可以这么实现。
<Date-picker
v-else-if="formContent.type=='datetime'"
type="datetime" format="yyyy-MM-dd HH:mm"
placeholder="请选择日期..." @on-change="changeDate"
></Date-picker>
....
methods:{
changeDate(date){
//这里的date就是我们想要的本地时间
console.log(date)
}
}
嗯，由于on-change事件只有一个返回值。这样的话，我们没有办法把需要绑定的对象传进去。现在离绑定到我们表单的数据还差一步，自然是不能放弃的。既然on-change事件有返回值，那么我们可以通过先绑定一个匿名函数的方法把想要的值给传进去。
<Date-picker
v-else-if="formContent.type=='datetime'"
type="datetime" format="yyyy-MM-dd HH:mm"
placement="top" placeholder="请选择日期..."
@on-change="(datetime) =>{ changeDateTime(datetime, formContent)}">
</Date-picker>
....
methods:{
changeDate(datetime, formContent){
//这里的date就是我们想要的本地时间
console.log(date)
//这里就可以对后面传进来的参数进行操作了
}
}
如此，就能优雅地给日期选择器帮上当地时间了。当然，iView的作者也在相关的issue中提到，会在之后的版本中会进行修正。当然在此之前，还是先老老实实用on-change事件来解决吧。
