iView中日期选择器UTC格式时间的处理方法

最近在用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事件来解决吧。