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

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

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

复制代码
 //开始时间
            
                <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()
          }
        }
      },

效果图

先选择结束时间:

先选择开始时间

相关推荐
你的人类朋友3 小时前
【Node&Vue】JS是编译型语言还是解释型语言?
javascript·node.js·编程语言
烛阴4 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20184 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
黑客飓风5 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
杨荧7 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang7 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip7 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015118 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
李明卫杭州9 小时前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚9 小时前
栈溢出优化
javascript