当前位置:网站首页>elemntUI限制时间选择器不能跨月并且不大于未来时间

elemntUI限制时间选择器不能跨月并且不大于未来时间

2022-08-11 11:38:00 小太阳...

限制时间选择器不能跨月,并且不能选择未来时间
代码如下:

  <el-date-picker
  	 v-modal="selectDate"
     value-format="yyyy-MM-dd HH:mm:ss"
     type="datetimerange"
     :default-time="['00:00:00', '23:59:59']"
     range-separator="至"
     :picker-options="pickerOptionsMonth"
     @change="changeDate">
  </el-date-picker>
data() {
    
	return {
    
		selectDate: '',
		selectTime: '',
       // 只能选取某一个月的时间
       pickerOptionsMonth: {
    
         onPick: ({
      maxDate, minDate }) => {
    
           this.selectTime = minDate.getTime();
           if (maxDate) {
    
             this.selectTime = '';
           }
         },
         disabledDate: time => {
    
           let nowDay = new Date()
           nowDay.setHours(23);//设置小时
           nowDay.setMinutes(59);//设置分钟
           nowDay.setSeconds(59);//设置秒
           nowDay.setMilliseconds(59);//设置毫妙
           let timestamp = nowDay.getTime();//获取时间戳
           if (this.selectTime !== '') {
    
             const selectDate = new Date(this.selectTime)
             const nowYear = selectDate.getFullYear() // 当前年
             const nowMonth = selectDate.getMonth() // 当前月
             // 本月的开始时间
             const monthStartDate = new Date(nowYear, nowMonth, 1).getTime()
             // 本月的结束时间
             const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime()
             return time.getTime() >= timestamp || time.getTime() < monthStartDate || time.getTime() > monthEndDate
           } else {
    
             return time.getTime() >= timestamp
           }
         }
       },

	}
},
method: {
    
	// 防止输入的时间跨月,如果输入时间跨月清空时间并提示
	changeDate(val) {
    
	    //时间点选择改正
	      if(val!= null){
    
	          var statr = val[0],end = val[1]
	          var val= statr +'至'+ end;
	          // 时间判断不能跨月
	            if (statr.substring(0, 7) !== end.substring(0, 7)) {
    
	              this.$message.warning('查询支付时间不能跨月')
	              val = null
	              this.selectDate= ''
	            }
	      }
	}
}
原网站

版权声明
本文为[小太阳...]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_46074961/article/details/126222237