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

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

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

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

效果图

先选择结束时间:

先选择开始时间

相关推荐
幼儿园老大19 分钟前
告别代码屎山!UniApp + Vue3 自动化规范:ESLint 9+ 扁平化配置全指南
javascript·vue.js
daols8843 分钟前
vue 甘特图 vxe-gantt table 连接线的用法详解
vue.js·甘特图·vxe-table
Liu.7741 小时前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|1 小时前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
全栈前端老曹1 小时前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
小小黑0071 小时前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
@万里挑一2 小时前
vue中使用虚拟列表,封装虚拟列表
前端·javascript·vue.js
黑臂麒麟2 小时前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
用户7227868123442 小时前
Vue2中能否实现输入中文自动转化为拼音, 且不带音调
vue.js
1024肥宅2 小时前
工程化工具类:模块化系统全解析与实践
前端·javascript·面试