记录饿了吗组件el-date-picker 的时间范围问题

有一个需求，要求目前只能选择到当前时间的2小时以内

做气象开发发布预警有一个需求就是发布时间只能选择当前时间的2小时以内的，那么就有一个跨天的问题需要思考

那么得知道什么时候可以跨天，由于我这里默认只能选择到分钟

先控制当前天的选择问题 利用 el-date-picker 的picker-options

页面部分
<template>
	<el-form>
        <div class="el-form--time">
          <el-form-item label="发布时间:" class="date" required>
            <el-date-picker
              type="datetime"
              v-model="begin_time"
              :picker-options="pickerOptions"
              prefix-icon="custom-date-icon"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd-HH-mm"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form>
</template>

script部分
export default {
	data(){
		return{
			begin_time: new Date(), // 当前时间
		    selectTimeRange: "", // 后面选择时间范围用
		    pickerOptions: {
		    	// 这里是控制天的选择
		        disabledDate(date) {
		          const now = new Date();
		          const now2 = new Date();
		          now2.setHours(0);
		          now2.setMinutes(0);
		          now2.setSeconds(0);
		          if (now.setHours(now.getHours() + 2) < now.getHours()) {
		            const startDateTime = now.setDate(now.getDate());
		            const endDateTime = now.setDate(now.getDate() + 1);
		            return (
		              date.getTime() <= new Date(startDateTime).getTime() ||
		              date.getTime() >= new Date(endDateTime).getTime()
		            );
		          } else {
		            return (
		              date.getTime() <= now2.getTime() - 8.64e7 ||
		              date.getTime() >= now.getTime()
		            );
		          }
		        },
		      },
		}
	},
	watch:{
		begin_time: {
	      handler(val) {
	        if (val) {
	        	// 这里是控制只能选择两小时 给selectTimeRange 赋值好 再传给pickerOptions
	          const nowDays = val.split("-")[2];
	          if (Number(nowDays) === Number(new Date().getDate())) {
	            console.log("我选择了当天的时候", new Date().getHours());
	            if (new Date().getHours() >= 22) {
	              this.selectTimeRange = `${new Date().getHours()}:${new Date().getMinutes()}:00 - 23:59:00`;
	            } else {
	              this.selectTimeRange = `${new Date().getHours()}:${new Date().getMinutes()}:00 - ${new Date(
	                new Date().setHours(new Date().getHours() + 2)
	              ).getHours()}:${new Date().getMinutes()}:00`;
	            }
	          } else if (Number(nowDays) === Number(new Date().getDate()) + 1) {
	            console.log("我选择了第二天的时候");
	            if (new Date().getHours() + 2 === 24) {
	              this.selectTimeRange = `00:00:00 - 00:${new Date().getMinutes()}:00`;
	            } else if (new Date().getHours() + 2 === 25) {
	              this.selectTimeRange = `00:00:00 - 01:${new Date().getMinutes()}:00`;
	            }
	          }
	          this.$set(
	            this.pickerOptions,
	            "selectableRange",
	            this.selectTimeRange
	          );
	        }
	      },
	    },
	} 
}