设置指定时间之前的时间不可选

1、el-date-picker设置今天之前的日期不可选


              

效果图:

设置指定时间之前的时间不可选_第1张图片

2、el-time-picker设置指定时间之前的时间不可选


            
              
              
            
          
          
            
              
              
            
          

效果图:设置指定时间之前的时间不可选_第2张图片

 3、设置YYYY-MM-dd HH:mm:ss格式指定时间之前不可选


            
              
              
            
          
          
            
              
              
            
          
// 结束时间不能小于开始时间
        pickerOptionsEnd(start,end){
          console.log(start)
          console.log(end)
          if(Date.parse(end )<= Date.parse(start) ) {
            this.form.stopTime = ''
            this.$modal.msgError("结束时间不能小于停机时间");
          }
        },

效果图:

 4、element 日期时间组件,限制日期时间选择范围,不能选择早于当前的时间

vue代码


            
              
              
            
          
          
            
              
              
            
          

js代码 

data() {
      return {
// 表单参数
        form: {
          stopTime:"",
        },
// 日期限制
        pickerEndOptions: {
          disabledDate: (time) => {
            if (this.form.enterTime) {
              const st = this.form.enterTime.split(' ')[1];
              let dateTime = new Date(this.form.enterTime);
              let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));
              return (
                time.getTime() < new Date(startDateTime).getTime()
              );
            }
          },
          // 限制时间
          selectableRange: []
          
        },
}
}

监听 

watch: {
      'form.stopTime':{
        handler(newValue, oldValue) {
          if(this.form.enterTime.split(" ")[0] === newValue.split(" ")[0]){
            const st = this.form.enterTime.split(' ')[1] + ":00";
            console.log(st)
            this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];
          }else{
            this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];
          }
        }
      }
    },

效果图

设置指定时间之前的时间不可选_第3张图片

你可能感兴趣的:(vue.js,elementui,前端)