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>
相关推荐
rookie fish6 分钟前
Electron+Vite+Vue项目中,如何监听Electron的修改实现和Vue一样的热更新?[特殊字符]
前端·vue.js·electron
今天不要写bug33 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优36 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
一只小阿乐36 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
小圣贤君37 分钟前
小说写作中的时间轴管理:基于 Vue 3 的事序图技术实现
vue.js·electron·写作·甘特图·时间轴·事序图
Zz_waiting.37 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
一只小风华~41 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17175 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技9 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一只小风华~11 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架