el-date-picker 时间限制到 分 实现结束大于开始时间（不等于）

时间段额组件 type = datetimerange 不支持限制到时间 这里选用 type = datetime 将开始结束时间分开 

            <el-date-picker
              v-model="ruleForm.plan_start_time"
              type="datetime"
              format="yyyy/MM/dd HH:mm"
              @change="changeDateStart"
              placeholder="开始日期"
              :picker-options="pickerOptionsStart"
              style="width: 162px">
            </el-date-picker>-
            <el-date-picker
              v-model="ruleForm.plan_end_time"
              type="datetime"
              format="yyyy/MM/dd HH:mm"
              @change="changeDateEnd"
              placeholder="结束日期"
              :picker-options="pickerOptionsEnd"
              style="width: 162px">
            </el-date-picker>

computed: {
    pickerOptionsStart() {
      let that = this;
      let hour = new Date().getHours();
      let min = new Date().getMinutes();
      return {
        // 日期选择限制
        disabledDate: time => {
          return time.getTime() <= new Date() - (24 * 60 * 60 * 1000);
        },
        // 时间选择限制
        selectableRange: (new Date().toDateString() == new Date(that.ruleForm.plan_start_time).toDateString()) ? hour + ':' + min + ':00 - 23:59:00' : '00:00:00 - 23:59:00'
      };
    },
    pickerOptionsEnd() {
      let that = this;
      let hour = that.ruleForm.plan_start_time ? new Date(that.ruleForm.plan_start_time).getHours() : '00';
      let min = that.ruleForm.plan_start_time ? new Date(that.ruleForm.plan_start_time).getMinutes() + 1 : '00';
      return {
        // 日期选择限制
        disabledDate: time => {
          if (that.ruleForm.plan_start_time) {
            if (hour == 23 && new Date(that.ruleForm.plan_start_time).getMinutes() == 59) {
              return time.getTime() <= new Date(that.ruleForm.plan_start_time).getTime();
            }
            return time.getTime() <= new Date(that.ruleForm.plan_start_time).getTime() - (24 * 60 * 60 * 1000);
          }
        },
        // 时间选择限制
        selectableRange: `${new Date(that.ruleForm.plan_start_time).toDateString() == new Date(that.ruleForm.plan_end_time).toDateString() ? hour + ':' + min + ':00' : '00:00:00'} - 23:59:59`
        // selectableRange: (new Date(that.ruleForm.plan_start_time).toDateString() == new Date(that.ruleForm.plan_end_time).toDateString()) ? hour + ':' + min + ':00 - 23:59:00' : '00:00:00 - 23:59:00'
      };
    },
}

存在问题： 选完开始时间选结束时间 选择同一天时 结束时间默认为0时0分 但时间选项已经禁用

目标实现： 选择结束时间时 默认为禁用的最小时间

最后

以上就是闪闪河马为你收集整理的el-date-picker 时间限制到 分 实现结束大于开始时间（不等于）的全部内容，希望文章能够帮你解决el-date-picker 时间限制到 分 实现结束大于开始时间（不等于）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。