在使用element-ui中的日期选择器时(datePicker)时，可能会遇到的问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div v-if="search.type&&search.type==='date'">
   <el-form-item
     :label="search.label"
     :prop="'list.'+index+'.value'"
     :rules="search.rules?search.rules:{}"
   >
     <el-date-picker
       v-model="search.value"
       align="right"
       type="date"
       :placeholder="search.placeholder?search.placeholder:'选择日期'"
       :picker-options="pickerOptionsDate">
     </el-date-picker>
   </el-form-item>
</div>

该代码中少写了一个属性，value-format=”date” 所以报错误提示 “list.1.value is not string”,解决方法在代码中加上 value-format=”date” 属性即可 。

value-format

value-format属性是改变v-model上值的格式

1
2
3
value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000

我们最后获取的值都是要传给后台的，所以，我们需要value-format这个属性
假如后台需要的是是 2018-12-27 格式
添加 value-format=”yyyy-MM-dd”
会发现验证里加了v-model值的验证都无效了
其实很好解决，判断的依据是13位的时间戳，所以我们需要把验证里的v-model的值替换成13时间戳就可以了.当然你也可以改为 value-format=“timestamp” 也行（这需要考虑之后传值的转换）

在这推荐一个插件 moment，一个操作时间的插件，有兴趣可以去了解一下

参考这儿.