Element-ui Time Limits the start and end times of the date picker

When a form is involved in business, it is necessary to choose the start time and end time. Individuals choose elemen’s time and date picker. Therefore, when users select the start time, we need to restrict the selection of the date and time that do not meet the requirements, and vice versa.

– Then you need picker-options, which is an object with the disabledDate property inside. The code:

pickerOptionsStart: {
  // Start date limit
  selectableRange: "".disabledDate: (time) = > {
	  if (this.formData.endTime) {
		  // console.log("time", time);
		  return time.getTime() > new Date(this.formData.endTime).getTime(); }}},pickerOptionsEnd: {
  selectableRange: "".// End date limit
  disabledDate: (time) = > {
  if (this.formData.startTime) {
	return time.getTime() + 24 * 60 * 60 * 1000< =new Date(this.formData.startTime).getTime(); }}},Copy the code

– The above two objects are written in the component’s data(){} and are bound to the el-date-picker tag as follows:

<el-date-picker :picker-options="pickerOptionsStart" @input="startInput" placeholder="Choose a start time"></el-date-picker>
<el-date-picker :picker-options="pickerOptionsEnd" placeholder="Select end time"></el-date-picker>
Copy the code

After looking at the source code, it is possible to bind the input event, which is triggered when you click on the date picker on a certain day, so when the start time is confirmed, it is possible to limit the end time.

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"; }},// Add the change event to ensure that nothing goes wrong
startChange(val){
  if(val){
    this.pickerOptionsEnd.selectableRange = val.split("") [1] + "- 23:59:00";
    }else{
      this.pickerOptionsEnd.selectableRange = "00:00:00-23:59:00"; }}Copy the code

– The above operations are for the start operation only. The operations for the end are basically the same.