vue antd DatePicker如何通过disabledDate使三个日期选择框联动？

Z时代
2024-03-10
分类：IT

要求：时间1<时间2<时间3
时间1和时间3还好说，时间2怎么设置都有bug

//时间1<时间2<时间3
disabledStartDate(time2) {
  const time1 = this.form.time1;
  const time3 = this.form.time3;
  if (!time2 || !time1) {
return false;
  }
  if (!time2 || !time3) {
    return false;
  }
  return (
    time2.valueOf() > time3.valueOf() ||
    time1.valueOf() > time2.valueOf()
  );}

time2改了好多遍，怎么写都会失效一两块日期选择限制，如何写才能完美的实现三个组件日期选择限制联动？

回答：

简单的处理，就是让用户选择时间一后在设置时间二，之后在设置时间三，这样只需要三>二，二>一就行了，如果用户先设置二，在设置三，最后设置一，那设置一的时候，重置掉二三的选择就好，设置好一后在设置三，那设置二的时候，重置掉三的值就好了
还有，根据需求，时间二应该小于时间三，你条件是大于时间三
复杂一点：

//时间1<时间2<时间3
disabledStartDate(time2) {
  const time1 = this.form.time1;
  const time3 = this.form.time3;
  // 无1有3，2<3就行
  if(!time1 && time3){
     return time2.valueOf() < time3.valueOf()
  }
  // 有1无3，2>1就行
  if(time1 && !time3){
    return time2.valueOf() > time1.valueOf()
  }
  // 有1有3，2>1且2<3才行
  if(time1 && time3){
    return time1.valueOf() < time2.valueOf() && time2.valueOf() < time3.valueOf();
  }
  // 无1无3，skip}