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

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

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

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

效果图

先选择结束时间:

先选择开始时间

相关推荐
小小亮016 小时前
Next.js基础
开发语言·前端·javascript
华洛6 小时前
我用AI做了一个48秒的真人精品漫剧,不难也不贵
前端·javascript·后端
Amumu121387 小时前
Js:正则表达式(二)
开发语言·javascript·正则表达式
Sgf2277 小时前
ES8(ES2017)新特性完整指南
开发语言·javascript·ecmascript
Cobyte10 小时前
1.基于依赖追踪和触发的响应式系统的本质
前端·javascript·vue.js
老神在在00110 小时前
【Selenium 自动化精讲】浏览器弹窗与登录界面的本质区别 & 实操指南
javascript·学习·selenium·测试工具·自动化
计算机学姐11 小时前
基于SpringBoot的咖啡店管理系统【个性化推荐+数据可视化统计+配送信息】
java·vue.js·spring boot·后端·mysql·信息可视化·tomcat
前端小咸鱼一条11 小时前
16.迭代器 和 生成器
开发语言·前端·javascript
web守墓人11 小时前
【前端】记一次将ruoyi vue3 element-plus迁移到arco design vue的经历
前端·vue.js·arco design
前端小阳11 小时前
JavaScript原型链
javascript