element ui el-date-picker时间限制,结束日期时间不能小于等于开始日期时间和只能选当天和昨天

在这里插入图片描述

限制选中当天和昨天或者今天之前,今天之后的日期
在这里插入图片描述

示例1:

HTML:

 <el-form-item  label="开始时间:" prop="startTime">
   <el-date-picker
        @change="pickerOptionsStart"
        v-model="ruleForm.startTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间">
    </el-date-picker>
  </el-form-item>
            
  <el-form-item  label="结束时间:" prop="endTime">
    <el-date-picker
        @change="pickerOptionsEnd"
        v-model="ruleForm.endTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间">
    </el-date-picker>
  </el-form-item>

JS

methods: {
    
    
    // 开始时间不能大于结束时间
    pickerOptionsStart(){
    
    
      if(Date.parse(this.ruleForm.startTime )>= Date.parse(this.ruleForm.endTime) ){
    
    
        this.ruleForm.startTime = ''
        this.$notify({
    
    
          title: '警告',
          message: '开始时间不能大于结束时间',
          type: 'warning'
        });
        return
      }
    },
    // 结束时间不能小于开始时间
    pickerOptionsEnd(){
    
    
      if(Date.parse(this.ruleForm.endTime )<= Date.parse(this.ruleForm.startTime) ) {
    
    
        this.ruleForm.endTime = ''
        this.$notify({
    
    
          title: '警告',
          message: '结束时间不能小于开始时间',
          type: 'warning'
        });
      }
    },
 }

示例2

主要:picker-options=“pickerOptions”

<el-date-picker
	v-model="queryInfo.time" value-format="yyyy-MM-dd"
	type="daterange" range-separator="至" start-placeholder="开始日期"
	@change="getData(1, 10)" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
data() {
    
    
    return {
    
    
      pickerOptions: {
    
    
        disabledDate(v) {
    
    
        // 1、日期禁止选择今天以前的日期
          return v.getTime() < new Date().getTime() - 86400000; 
          //return time.getTime() < Date.now()-1 * 24 * 60 * 60 * 1000
          
       // 2、日期禁止选择今天之后的日期
          return v.getTime() > Date.now();

	   //3、限制只能选当天00:00:00点-12:59:59点其他时间不可选:
	    const start = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
        return time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() + (start - new Date().getTime());
	    //new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
		//获取当天23:59:59的时间戳
		//new Date().getTime()
		//获取当前时间的时间戳
  
       // 4、日期限制只能选当天和昨天 
		 let limitDate =
		            v.getTime() < new Date().getTime() - 2 * 86400000 ||
		            v.getTime() >= Date.now();
		          // 86400000:一天的毫秒
		          return limitDate;
        }
      },
    }
  }

猜你喜欢

转载自blog.csdn.net/qq_44552416/article/details/125378071
今日推荐