elementui 日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)...
时间: 2024-01-02 14:03:27 浏览: 55
要设置日期选择器的默认日期和禁用当前日期以后的日期,可以使用 ElementUI 中的 `picker-options` 和 `default-value` 属性。
1. 设置默认日期:
在 `picker-options` 中设置 `disabledDate` 函数,该函数返回值为布尔类型,表示是否禁用指定日期。在该函数中,可以使用 `new Date()` 获取当前日期,然后返回当前日期或其之后的日期即可。
示例代码:
```html
<el-date-picker
v-model="date"
:picker-options="pickerOptions"
></el-date-picker>
```
```javascript
data() {
return {
date: '',
pickerOptions: {
disabledDate: (date) => {
const today = new Date();
return date > today;
}
}
};
}
```
2. 设置默认值:
使用 `default-value` 属性即可设置默认日期,该属性的值为一个 `Date` 类型的日期对象。
示例代码:
```html
<el-date-picker
v-model="date"
:default-value="defaultValue"
></el-date-picker>
```
```javascript
data() {
return {
date: '',
defaultValue: new Date()
};
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)