Element UI中的日期选择器的default-value无效的解决

发表于 2021-12-02 06:05:10, 最后编辑于2021-12-02 06:17:55 (UTC+0)

本来我们是这么想的：一个字段中，我们没有填写日期，打开输入框，会默认显示今天的日期。所以我们给el-datepicker组件设置了default-value="new Date()"

但却发现，这玩意儿无效。不管把default-value改成啥。

因为这里我们给日期组件绑定了v-model, 而v-model的对象的默认值是0

v-model的优先级高于default-value的优先级

电脑一看，有v-model，而且还是0，就说：“来吧，我们把这个0当作js版的时间戳来处理（js版时间戳以毫秒为单位，等于php的时间戳*1000）”，然后就把0解析成了1970-1-1，这就成了日期组件显示的时间。

解决方法当然是把v-model的值搞没，可以把它设置成null。

示例如下：

<!-- 
template in demo.vue:
value-format为了让日期格式正确
-->
<el-date-picker
  v-model="theDay"
  type="date"
  placeholder="选择日期"
  :default-value="new Date()"
  value-format="yyyy-MM-dd"
>
</el-date-picker>

//js in demo.vue
data(){
  theDay: null // 默认值 写成0可不行
}

然后打开就可以显示默认日期啦。

参考文献：

https://blog.csdn.net/qq_40378165/article/details/104417642

0.063894s