前端vue+element UI时间日期选择器控制只能选今天此刻下个小时的时间

前端vue+element UI时间日期选择器控制只能选今天此刻下个小时的时间

实现效果：

1.使用参数picker-options
建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差）
disabledDate ：控制只能选择今天及以后的日期
selectableRange ：控制选择的时间段。如果是今天，则时间从下个小时开始，否则从0时开始（想要控制不同的时间段，代码里面可做修改）

// An highlighted block
<el-date-picker 
	type="datetime" 
	format="yyyy-MM-dd HH:mm:ss" 
	value-format="yyyy-MM-dd HH:mm:ss" 
	v-model="ruleForm.startDate" 
	time-arrow-control
	:picker-options="{
     
		disabledDate: time => {
     
		return time.getTime() < Date.now() - 3600 * 1000 * 24
		},
	selectableRange: startTimeRange
	}"
	label="开始时间" />

2.使用vue的watch监听
因为是对对象中的一个属性进行监听所以，要写成’ruleForm.startDate’，format()是自己重新封装过的一种时间处理方法，获取当前时间并且格式化，getNextHour（）是自己写的获取当前时间的下个小时的函数（例如当前是10:22:00，这个函数返回的就是11:00:00，这个函数可以根据不同的需求自己做更改）

// An highlighted block
watch: {
     
	  'ruleForm.startDate':{
     
          handler(newValue, oldValue) {
     
            if(newValue){
     
                let nowDate = this.$format(new Date(),'YYYY-MM-DD HH:mm:ss');
                let dt = nowDate.split(" ");
                let st = '';

                if(newValue.split(" ")[0] == dt[0]){
     
                // 是今天,选择 的时间开始为此刻的时分秒
                  st = this.getNextHour()
                }else{
     
                // 明天及以后从0时开始
                  st = '00:00:00';
                }
                this.startTimeRange =  st + ' - 23:59:59'; 
                //例如：如果今天此刻时间为10:41:40 则选择时间范围为： 11:00:00 - 23:59:59  
                //否则为：00:00:00- 23:59:59
             } 
          }
        }

3.注意：在data里面要先把startTimeRange提前声明，不然会报错

// An highlighted block
data() {
     
	return {
     
	startTimeRange:''
	}
}

第一次写文章，有写的不好的希望各位多多包涵，以后会改进的。在借鉴了这位博主文章的基础上，根据我的一些问题自己做了相应的修改。链接: https://blog.csdn.net/qq_26642611/article/details/103761975.