时间控件,开始时间和结束时间限制

****开始时间必须小于结束时间

如果选择了结束时间,开始时间必须小于结束时间

复制代码
 //开始时间
            
                <el-date-picker
                    style="width:190px;"
                    v-model="searchForm.clsjdate"
                    placeholder="请选择日期"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions0"
                    clearable
                    />
//结束时间
                 <el-date-picker
                   style="width:190px;"
                    v-model="searchForm.zzsjdate"
                    placeholder="请选择日期"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions1"
                    clearable
                 />


//限制
pickerOptions0: {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          let end = this.searchForm.zzsjdate
          if (end) { 
            return time.getTime() > (new Date(end).getTime() - 24 * 60 * 60 * 1000)
          }
        }
      },
      pickerOptions1: {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          let start = this.searchForm.clsjdate
          if (start) {
            return time.getTime() < new Date(start).getTime()
          }
        }
      },

效果图

先选择结束时间:

先选择开始时间

相关推荐
Cobyte20 分钟前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
竹林81824 分钟前
从零到一:在React前端中集成The Graph查询Uniswap V3池数据实战
前端·javascript
军军君0134 分钟前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
Moment36 分钟前
AI全栈入门指南:一文搞清楚NestJs 中的 Controller 和路由
前端·javascript·后端
禅思院37 分钟前
前端架构演进:基于AST的常量模块自动化迁移实践
前端·vue.js·前端框架
程序员马晓博37 分钟前
前端并发治理:从 Token 刷新聊起,一个 Promise 就够了
前端·javascript
许杰小刀37 分钟前
FastAPI + Vue 前后端分离实战:我的项目结构“避坑指南”
前端·vue.js·fastapi
walking9571 小时前
Vue3 日历组件选型指南:五大主流方案深度解析
前端·vue.js·面试
英俊潇洒美少年1 小时前
Vue、React.lazy、React 19 异步组件核心区别
javascript·vue.js·react.js
快乐小土豆~~2 小时前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts