vue element ui - el-date-picker 日期选择器-马育民老师

# 说明

[![](https://www.malaoshi.top/upload/pic/vue/element_ui/Snipaste_2022-03-02_19-36-46.png)](https://www.malaoshi.top/upload/pic/vue/element_ui/Snipaste_2022-03-02_19-36-46.png)

# 取值格式

日期选择器控件，默认情况下，获取值是下面格式，并不是 `yyyy-MM-dd` 格式

[![](https://www.malaoshi.top/upload/pic/vue/element_ui/20210615190050116.jpeg)](https://www.malaoshi.top/upload/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