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>
相关推荐
前端农民工ws33 分钟前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿2 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11253 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_3 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
槿泽3 小时前
Vue集成Electron目前最新版本
前端·vue.js·electron
用户31506327304873 小时前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
javascript·vue.js
paopaokaka_luck4 小时前
绿色环保活动平台(AI问答、WebSocket即时通讯、协同过滤算法、Echarts图形化分析)
java·网络·vue.js·spring boot·websocket·网络协议·架构
老华带你飞5 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序