elementui的el-date-picker选择日期范围第二个不能早于第一个

选择日期范围第二个不能早于第一个

复制代码
          <el-form-item label="预计施工时间:" required>
            <el-form
              :model="form"
              :rules="constructionDateRules"
              ref="constructionRef"
              inline
              :hide-required-asterisk="false"
            >
              <el-form-item prop="constructionStartDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form.constructionStartDate"
                  type="date"
                  placeholder="开工日期"
                 
                  style="width: 196px; margin-right: 8px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="constructionEndDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form.constructionEndDate"
                  type="date"
                  placeholder="竣工日期"
                  style="width: 196px"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-form-item>

data(){
	return {
		    //判断时间选择上个选择时间之后的时间
    pickerOptions: {
      disabledDate: (time) => {
        if (this.form.constructionStartDate != "") {
          return (
            time.getTime() <
              new Date(this.form.constructionStartDate).getTime()
          );
        }else{
            this.$message.warning('请先选择开工日期')
          }
      },
    },
	}
}

选择第一个日期不能早于今天

选择日期范围第二个不能早于第一个

复制代码
          <el-form-item label="预计施工时间:" required>
            <el-form
              :model="form"
              :rules="constructionDateRules"
              ref="constructionRef"
              inline
              :hide-required-asterisk="false"
            >
              <el-form-item prop="constructionStartDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form.constructionStartDate"
                  type="date"
                  placeholder="开工日期"
                  :picker-options="pickerOptions1"
                  style="width: 196px; margin-right: 8px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="constructionEndDate">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form.constructionEndDate"
                  type="date"
                  placeholder="竣工日期"
                  style="width: 196px"
                  :picker-options="pickerOptions2"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-form-item>

data(){
	return {
pickerOptions1: {
             disabledDate(time) {
                 var timeNow = Date.now()
                 var before = timeNow - 24 * 60 * 60 * 1000
                 return time.getTime() < before;
             },
         },

//判断时间选择上个选择时间之后的时间
    pickerOptions2: {
        disabledDate: (time) => {
         var timeNow = Date.now()
         var before = timeNow - 24 * 60 * 60 * 1000
          if (this.form.jzdate != "") {
             return time.getTime() < new Date(this.form.jzdate).getTime() || time.getTime() < Date.now() - 8.64e7;
           }else{//还没有选择结束时间的时候,让他只能选择今天之后的时间包括今天
             return time.getTime() < before
           } 
         }
     }
	}
}
相关推荐
cxr82810 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全10 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊10 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿13 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊13 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪13 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅14 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防14 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump14 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅15 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby