el-date-picker limits the fixed start time and end date, users can only choose within this range

The demand I got today is that the start time and end time are fixed, and users can only choose within this range. For a better user experience, I chose to gray out the dates that cannot be selected.

The effect is as follows: you can clearly see that dates before 2023-01-04 cannot be selected

The current time limit start range is 2023-01-01 00:00 and the end time is 2023-02-28 00:00

code show as below: 

<template>
 <div>
  // ....此处省略其余代码
       <el-form-item label="任务截至时间" prop="startTime">
            <el-date-picker
              :disabled="hasTime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              v-model="form.startTime"
              @change="changeTime"
              type="datetime"
              :picker-options="startTimePicker"
              placeholder="请选择开始日期"
            >
            </el-date-picker>
          </el-form-item>
 </div>
</template>

<srcipt>
 export defalut {
    data() {
      return {
        startTimePicker: {
          disabledDate: time => {
            // 这个dateTime 是拿到的时间范围值
             const [start, end] = this.dateTime
             const timer = new Date(time).getTime()
             return timer < new Date(start) || timer > new Date(end)
           }
         },
         form： {
           startTime： ''
          },
         dateTime: []
       }
     }
}
}
</script>

I'm afraid that people won't understand what I wrote, try to write in more detail

---

If you read it, give it a thumbs up and go~~~