一般项目中可能会碰到需求:截止日期不能超过 2024-08-30 12:30,那么我们的日期时间选择器就不能选中该日期之后的时间部分,但是之前的日期是所有时间都能选择的,对此需求配置如下:

<el-date-picker
  :picker-options="endTimeOptions"
  style="width: 100%;"
  format="yyyy/MM/dd HH:mm"
  value-format="yyyy/MM/dd HH:mm"
  v-model="formData.EndTime"
  type="datetime"
></el-date-picker>

endTimeOptions 配置如下:
endTimeLimit:截止时间,题目中提到的2024-08-30 12:30
formData.EndTime:当前表单绑定的时间属性

computed: {
endTimeOptions() {
  let targetDate = dayjs(this.endTimeLimit)
  let diffDay = dayjs(dayjs(this.formData.EndTime).format('YYYY-MM-DD')).diff(dayjs(dayjs(this.endTimeLimit).format('YYYY-MM-DD')))

  //选中的“日期”小于限制“日期”——默认,所有时间能选
  let temp = `00:00:00-23:59:59`
  if (diffDay == 0) {//选中的“日期”等于限制“日期”
    temp = `00:00:00-${dayjs(targetDate).format('HH:mm')}:59`//时间只能限制到,限制日期的时间
  }else if(diffDay > 0) {//其他日期时间都不能选
    temp = `00:00:00-00:00:00`
  }

  let obj = {
    //禁止选择当前日期后的时间
    disabledDate: date => {
      if (this.endTimeLimit) {
        let currentDate = dayjs(date);
        let targetDate = dayjs(this.endTimeLimit);
        return currentDate.diff(targetDate, "m") > 0;
      }
      return false;
    },
    selectableRange: temp
  };

  return obj;
}
}

qngyun1029
955 声望15 粉丝