element-ui 时间日期选择器的开始时间和结束时间做限制

在做业务的时候涉及到form表单，需要有开始时间和结束时间的选择，个人选择的是elemen的时间日期选择器，那么当用户选择了开始时间，我们需要对不符合条件的日期时间给限制不能选，反之，结束时间也一样。 -那么就需要用到picker-options，这是一个对象，里面有disabledDate属性。上代码：

pickerOptionsStart: {
  //开始日期限制
  selectableRange: "",
  disabledDate: (time) => {
	  if (this.formData.endTime) {
		  // console.log("time", time);
		  return time.getTime() > new Date(this.formData.endTime).getTime();
		}
	},
},
pickerOptionsEnd: {
  selectableRange: "",
  //结束日期限制
  disabledDate: (time) => {
  if (this.formData.startTime) {
	return time.getTime() + 24 * 60 * 60 * 1000 <= new Date(this.formData.startTime).getTime();
		}
	},
},

-以上两个对象写在组件的data(){}里面，都是绑定在el-date-picker标签上，如下：

<el-date-picker :picker-options="pickerOptionsStart" @input="startInput" placeholder="选择开始时间"></el-date-picker>
<el-date-picker :picker-options="pickerOptionsEnd" placeholder="选择结束时间"></el-date-picker>

-接着就是对时间做限制，看过源码后，发现可以绑定input事件，当你点击日期选择器的某一天时就会触发此函数，因此当一开始确认了开始时间，那么此时就可以对结束时间的时分秒做限制。

startInput(val){
 if (this.formData.endTime && val) {
  if (this.formData.endTime.split(" ")[0] == val.split(" ")[0]) {
   this.pickerOptionsStart.selectableRange = "00:00:00 - " + this.formData.endTime.split(" ")[1];
   } else {
	 this.pickerOptionsStart.selectableRange = "00:00:00 - " + "23:59:00";
   }
} else {
	this.pickerOptionsStart.selectableRange = "00:00:00 - " + "23:59:00";
  }
},
//另外需要加上change事件保证万无一失
startChange(val){
  if(val){
    this.pickerOptionsEnd.selectableRange = val.split(" ")[1] + " - 23:59:00";
    }else{
      this.pickerOptionsEnd.selectableRange = "00:00:00 - 23:59:00";
	}
}

-以上只是对开始选择的操作，结束的操作基本相同，可以参考上面即可。