elementUI怎么设置月份选择的禁用这个月之前的月份和两个月之后的月份
时间: 2023-05-11 15:06:08 浏览: 867
您可以使用 elementUI 的 el-date-picker 组件,设置 disabledDate 属性来禁用指定日期之前和之后的月份。以下是示例代码:
```
<el-date-picker
v-model="date"
type="month"
:disabled-date="disabledDate"
></el-date-picker>
<script>
export default {
data() {
return {
date: ''
}
},
methods: {
disabledDate(time) {
const now = new Date()
const currentYear = now.getFullYear()
const currentMonth = now.getMonth() + 1
const targetYear = time.getFullYear()
const targetMonth = time.getMonth() + 1
return targetYear < currentYear || targetYear > currentYear + 1 ||
(targetYear === currentYear && targetMonth < currentMonth) ||
(targetYear === currentYear + 1 && targetMonth > currentMonth + 1)
}
}
}
</script>
```
在 disabledDate 方法中,我们获取当前日期和选择的日期,然后比较它们的年份和月份,如果选择的日期在当前日期之前或两个月之后,就返回 true,表示禁用该日期。
相关推荐
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)