iview 2.0 datePicker vmodel时区问题

问题描述

iview 2.0的前端组件框架中的DatePicker组件 使用v-model双向绑定 你会发现你的结果是个带时区的时间字符串 2024-05-01T12:00:00.000Z 而且还是0时区的 这样你修改表单的话可能导致你的日期一直向前一天

解决

其实这个DatePicker是不能绑定v-model的，只支持:value，使用如下写法

    <Date-picker type="date" placeholder="上次非现场检查日期" format="yyyy-MM-dd"
                             :value="formData.date"
                             @on-change="changeDate">
    </Date-picker>
               <script>
    			changeDate(date) {
				console.log(date)
				this.formData.date = date
				}           
               </script>

有很多文章都这么写过了，但有个问题，假如表单中有很多个日期类字段，难道每个字段都写个方法？解法如下

    <Date-picker type="date" placeholder="上次非现场检查日期" format="yyyy-MM-dd"
                             :value="formData.date1"
                             @on-change="(date)=>changeDate('date1',date)">
     <Date-picker type="date" placeholder="上次非现场检查日期" format="yyyy-MM-dd"
                             :value="formData.date2"
                              @on-change="(date)=>changeDate('date2',date)">
    </Date-picker>
               <script>
    			changeDate(fieldName,date) {
				console.log(date)
				console.log(fieldName)
				this.formData[fieldName] = date
				}           
               </script>

大功告成！！！