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

m0_52611940

已于 2023-07-28 10:08:58 修改

阅读量995

点赞数 1

文章标签： elementui vue.js 前端

于 2023-07-24 15:12:14 首次发布

本文链接：https://blog.csdn.net/m0_52611940/article/details/131896848

版权

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

          <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="pickerOptions"
                  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"
                  @change="changeTime"
                  :picker-options="pickerOptions2"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-form-item>

data(){
	return {
	 //先选择最后日期，那开始日期小于最后日期
	      pickerOptions: {
        disabledDate:(time) =>{
          if (this.form.constructionEndDate != "") {
            return (
              time.getTime() >
              new Date(this.form.constructionEndDate).getTime()
            );
          }
        },
      },
		    //判断时间选择上个选择时间之后的时间
		    pickerOptions2: {
		      disabledDate: (time) => {
		        if (this.form.constructionStartDate != "") {
		          return (
		            time.getTime() <
		              new Date(this.form.constructionStartDate).getTime()
		          );
		        }
		      },
		    },
		}
	}
//会有开始时间没选择的情况，给个提示
methods:{
    changeTime(){
      if (this.form.constructionStartDate == "") {
        this.$message.warning('请先选择开工日期')
        return  
      }
    },
}

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

          <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>

disabledDate需要用箭头函数，不然this.form就报underfined
在这里插入图片描述

data(){
	return {
pickerOptions1: {
//需要用箭头函数，不然this.form就报underfined， disabledDate(time) {}改成  disabledDate: (time) => {}
           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
           } 
         }
     }
	}
}