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

25 篇文章 2 订阅

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

  <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= ''
	            }
	      }
	}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值