vue element ui - el-date-picker 日期选择器 作者：马育民 • 2022-03-02 19:35 • 阅读：10073 # 说明 [](http://65242847.gitee.io/pic/vue/element_ui/Snipaste_2022-03-02_19-36-46.png) # 取值格式 日期选择器控件，默认情况下，获取值是下面格式，并不是 `yyyy-MM-dd` 格式 [](http://65242847.gitee.io/pic/vue/element_ui/20210615190050116.jpeg) ### 解决 使用 `value-format="yyyy-MM-dd"` 属性，格式化获取值，如下： ``` <el-date-picker type="date" placeholder="选择日期" v-model="start_date" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker> ``` # 设置值 由于 `el-date` 日期选择控件的值是 `date` 类型，最好不要字符串类型，在 **日期计算** 时，可能会由于日期类型不一致，导致报错 ### 解决 在 `mounted` 函数中，创建 `Date` 对象，并且设置 `年月日`，然后将该 `date` 对象赋值给 `el-date` 日期选择控件 代码： ``` mounted:function(){ /* * 由于 el-date 日期选择控件的值是 date类型，最好不要字符串类型 * 所以就创建Date对象，并且设置年月日，然后将该date对象赋值该 el-date 日期选择控件 */ const date = new Date() date.setFullYear(2004) date.setMonth(4) date.setDate(20) this.ruleForm.birthday = date }, ``` 原文出处：http://malaoshi.top/show_1IX2sEmXDGJZ.html