element ui 的 el-date-picker 日期选择组件设置可选日期范围

有时候,在使用日历控件的时候,我们需要进行定制,控制用户只能在指定日期范围内进行日期选择,在这里,我使用了 element ui 的 el-date-picker 日期选择控件,控制只能选择当前月及往前的2个月,效果如图:

HTML代码:

html 复制代码
<template>
    <el-date-picker :picker-options="pickerOptions" type="month" placeholder="选择月" v-model="monthsVal"></el-date-picker>
</template>

JS代码:

javascript 复制代码
<script>
export default {
    data() {
        return {
            monthsVal:'',
            pickerOptions: {
                disabledDate(time) {
                    const currentMonth = new Date().getMonth();
                    const allowedMonths = [currentMonth, currentMonth - 1, currentMonth - 2];
                    return !allowedMonths.includes(time.getMonth());
                },
            },
        }
    },
}
</script>

CSS代码:

css 复制代码
<style>
.el-month-table td .cell{
    background-color:unset !important;
}
</style>
相关推荐
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端5 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆7 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅8 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水9 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了9 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry10 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016111 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川12 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术13 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model