element的el-date-picker时间控件,限制选择范围区间天数并且当前之后的日期不可选

element的el-date-picker时间控件,限制选择范围区间天数并且当前之后的日期不可选

HTML部分代码

javascript 复制代码
       <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
            style="margin-right: 150px;"
        >
        </el-date-picker>

JS代码部分

javascript 复制代码
 data(){
        return {
            nextTime:'',
            dateRange: [],
            pickerMinDate: '',
            pickerOptions: {
                    onPick: ({ maxDate, minDate }) => {
                        this.pickerMinDate = minDate.getTime()
                        if (maxDate) {
                             this.pickerMinDate = ''
                        }
                    },
                    // 限制不能选择今天之后的日期
                    disabledDate: (time) => {
                        let date=new Date();
                        let year=date.getFullYear();
                        let month=date.getMonth()+1;
                        let day=date.getDate();
                        let now=`${year}-${month}-${day} 23:59:59`;
                        let mynow=new Date(now).getTime() // 这一步很关键,我看很多博主发的方法直接是获取的new Date().getTime()这个时间,实际使用并不能满足需求,所以这里需要传入我上面定义的now这个变量值时间
                        if (this.pickerMinDate) {
                            let one = 9 * 24 * 3600 * 1000。// 我这里定义的是10天的选择范围区间,这个可以根据实际项目需求更改这个时间范围!
                            let minTime = this.pickerMinDate - one
                            let maxTime = this.pickerMinDate + one
                            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime()>mynow
                        }else{
                            return time.getTime() > mynow
                        }
                            
                    },
            }

        }
    },

实际效果图(当前日期为20231204,所以当前日期以后的不可选)

代码使用需要看看我代码里面的注释,根据自己的需求更改一下!

相关推荐
陈随易6 小时前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
Dream-Y.ocean8 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn9 小时前
性能监控
前端
Highcharts.js9 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn9 小时前
构建工具
前端
FRing0310 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷10 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
kyriewen12 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒12 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫13 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库