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

时间日期选择器控制只能选今天此刻下个小时的时间"/>

前端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:''}
}

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