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

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

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

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

效果图

先选择结束时间:

先选择开始时间

相关推荐
我命由我123453 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
橙露4 小时前
JavaScript 异步编程:Promise、async/await 从原理到实战
开发语言·javascript·ecmascript
2301_780669864 小时前
前端logo替换开发
前端·vue.js
我命由我123454 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商5 小时前
2026年WordPress网站地图完整指南
java·前端·javascript
英俊潇洒美少年6 小时前
MessageChannel 如何实现时间切片
javascript·react.js·ecmascript
技术钱7 小时前
react数据大屏四种适配方案
javascript·react.js·ecmascript
李明卫杭州7 小时前
JavaScript 严格模式下 arguments 的区别
前端·javascript
一次旅行7 小时前
今日心理学知识分享(三)
开发语言·javascript·程序人生·ecmascript
牛十二8 小时前
openclaw安装mcporter搜索小红书
开发语言·javascript·ecmascript