elementUI+vue3+ts日期选择器(开始时间 大于 结束时间限制)

运行代码

  <el-form-item label="报名日期"  prop="enrollDate">
            <el-date-picker :disabled="isDisabled" v-model="addActivity.enrollDate" value="YYYY-MM-DD" value-format="YYYY-MM-DD" type="daterange" range-separator="至"
 start-placeholder="开始日期" end-placeholder="结束日期" @change="enrollDateChangeFn"
:disabledDate="disabledDate" @calendar-change="calendarChangeFn"
  @visible-change="visibleChangeFn" :shortcuts="shortcuts">
      </el-date-picker>
 </el-form-item>


  const addActivity :any = reactive({
       
        enrollDate:[]
    })


let startTime = ref();
const enrollDateChangeFn=(time:any)=>{
  console.log("enrollDateChange")
  console.log(time)
}
const calendarChangeFn=(time:any)=>{
  console.log("calendarChange")
  console.log(time)
  startTime.value=time[0];
}
const visibleChangeFn=(time:any)=>{
  console.log("visibleChangeFn")
  console.log(time)
//消失的时候  开始时间赋值为0
  startTime.value=null;
}
//VUE3 写法
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
//vue2 写法
// const shortcuts= [
//   {
//     text: '今天',
//     onClick(picker:any) {
//       let start = new Date()
//       let end = new Date()
//       start.setHours(0, 0, 0)
//       end.setHours(23, 59, 59)
//       picker.emit('pick', [start, end]);
//     }
//   },
//   {
//     text: '昨天',
//     onClick(picker:any) {
//       let start = new Date()
//       let end = new Date()
//       start.setTime(start.getTime() - 3600 * 1000 * 24)
//       end.setTime(end.getTime() - 3600 * 1000 * 24)
//       start.setHours(0, 0, 0)
//       end.setHours(23, 59, 59)
//       picker.emit('pick', [start, end]);
//     }
//   }
// ]


const  disabledDate=(time:any)=>{
  console.log("disabledDate")
  //开始时间》结束时间
  return time.getTime() < startTime.value?.getTime();

}

两个时间选择器互相限制时间，

 <el-form-item label="报名日期" prop="enrollDate">
                      <el-date-picker v-model="addActivity.enrollDate"
                                      :disabled="isDisabled"
                                      :disabledDate="enrollDisabledDate"
                                      end-placeholder="结束日期"
                                      range-separator="至"
                                      start-placeholder="开始日期"
                                      type="daterange"
                                      value="YYYY-MM-DD"
                                      value-format="YYYY-MM-DD"
                                      @calendar-change="enrollCalendarChangeFn">
                      </el-date-picker>
                    </el-form-item>
 <el-form-item label="活动日期" prop="activityDateArr">
                      <el-date-picker v-model="addActivity.activityDateArr"
                                      :disabled="isDisabled"
                                      :disabledDate="activityDisabledDate"
                                      end-placeholder="结束日期"
                                      range-separator="至"
                                      start-placeholder="开始日期"
                                      type="daterange"
                                      value="YYYY-MM-DD"
                                      value-format="YYYY-MM-DD"
                                      @calendar-change="activityDalendarChangeFn">
                      </el-date-picker>
                    </el-form-item>

let enrollDateTime = ref<any>([]);
let activityDateTime = ref<any>([]);
const day = 60 * 60 * 24 * 1000;
const enrollCalendarChangeFn = (time: any) => {
  enrollDateTime.value = time;
}
const activityDisabledDate = (time: any) => {
  //活动开始时间>报名结束时间
  if (enrollDateTime.value.length == 2) {
    return time.getTime() < enrollDateTime.value[1]?.getTime() + day;
  }

}
const activityDalendarChangeFn = (time: any) => {
  activityDateTime.value = time;
}
const enrollDisabledDate = (time: any) => {
  //报名结束时间《活动开始时间
  if (enrollDateTime.value.length == 2) {
    return time.getTime() > activityDateTime.value[0]?.getTime() - day;
  }

}