vue disableddate禁用指定日期
时间: 2023-03-30 13:00:43 浏览: 72
可以使用disabledDate属性来禁用指定日期,例如:
<template>
<DatePicker :disabledDate="disabledDate" />
</template>
<script>
export default {
methods: {
disabledDate(date) {
// 禁用2022年1月1日
return date.getFullYear() === 2022 && date.getMonth() === && date.getDate() === 1;
}
}
}
</script>
相关问题
vue3 el-date-picker禁用指定日期之前或之后的日期
要在Vue3的el-date-picker中禁用指定日期之前或之后的日期,你可以使用pickerOptions属性来实现。引用\[2\]中的代码可以禁用今天之前的日期,代码如下:
```html
<el-date-picker v-model="date" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'选择日期'" :picker-options="pickerOptions"></el-date-picker>
```
```javascript
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}
```
而引用\[3\]中的代码可以禁用今天之后的日期(包括今天),代码如下:
```html
<el-date-picker v-model="date" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'选择日期'" :picker-options="pickerOptions"></el-date-picker>
```
```javascript
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
```
你可以根据需要选择其中一种方式来禁用指定日期之前或之后的日期。
#### 引用[.reference_title]
- *1* *2* *3* [el-date-picker禁用指定日期之前或之后的日期](https://blog.csdn.net/m0_70547044/article/details/131452031)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
el-date-picker禁用指定日期之前或之后的日期
要禁用el-date-picker中指定日期之前或之后的日期,可以使用pickerOptions中的disabledDate属性来实现。具体的实现方法如下:
1. 禁用指定日期之后的日期:
在pickerOptions中的disabledDate函数中,判断time.getTime()是否大于当前时间的时间戳Date.now(),如果大于,则返回true,表示禁用该日期。示例代码如下:
```
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
```
2. 禁用指定日期之前的日期:
在pickerOptions中的disabledDate函数中,判断time.getTime()是否小于指定日期的时间戳,如果小于,则返回true,表示禁用该日期。示例代码如下:
```
pickerOptions: {
disabledDate(time) {
return time.getTime() < new Date('2022-01-01').getTime();
}
}
```
你可以根据需要选择其中一种方法来禁用el-date-picker中指定日期之前或之后的日期。
#### 引用[.reference_title]
- *1* [vue element el-date-picker设置当日之前/之后的日期不可选择](https://blog.csdn.net/weixin_49513935/article/details/129796023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [el-date-picker禁用指定日期之前或之后的日期](https://blog.csdn.net/cyqzy/article/details/129951052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)