iview DatePicker 时间范围设置不可选日期的问题

Question

iview DatePicker的时间范围设置不可选日期

不可选日期
设置属性 options 对象中的 disabledDate 可以设置不可选择的日期

点击查看代码示例
1.例如先选择开始时间2019-08-06 00:00，再选择结束时间2019-08-06 00:00，点击下拉的面板中选择时间，会出现所有日期不能选择了，然后清空时间，发现开始时间的日期都不能选了，效果如下面的动图：

2.选了时分以后，结束日期不能选择当天了，如下图：

3.试了在disabledDate里加逻辑判断， 查看示例代码，貌似是解决了2，但是新的问题来了，选择的时分是2019-08-06 00:03时，结束时间的不可选就无法精确到小时分钟了，结束时间可以任意选择2019-08-06 00:00、2019-08-06 00:01，就造成了可选的结束时间能早于开始时间，这明显不对啊...

相关问题：iview的DatePicker组件，设置起止时间范围，无法精确到小时？

4.先选开始时间和结束时间，再选结束时间的选择时分，然后再选开始时间的时分，只有这样的操作逻辑才正常，如下图：

可这种操作逻辑明显不对啊，用户肯定是先选开始日期时间的，选了时间就不对了。

这个不可选日期到底该怎么判断设置呢？

到底该怎么判断设置呢？

Answer 1

选择开始时间2019-08-06 00:00，再选择结束时间2019-08-06 00:00，点击下拉的面板中选择时间，会出现所有日期不能选择了，然后清空时间，发现开始时间的日期都不能选了

这个问题的解决办法:
增加@on-clear，例如：

   clearBeginDate() {
      this.endDateOption = {
        disabledDate: date => {
          return date.valueOf() < 0;
        }
      };
    }

并在@on-change的方法中增加判断选中的日期不为空时设置相应的disabledDate：

      
    changeBeginDate(e) {
      this.form.beginDate = e;
      if (e) { //判断日期的值为空时，不要设置disabledDate
        this.endDateOption = {
          disabledDate: date => {
            let startTime = e ? new Date(e).valueOf() : "";
            return date && date.valueOf() < startTime;
          }
        };
      }
    },

示例代码：
点击查看效果

选了时分以后，结束日期不能选择当天了

这个问题的解决办法是在endDateOption的disabledDate时增加判断逻辑：

    changeBeginDate(e) {
      this.form.beginDate = e;
      this.endDateOption = {
        disabledDate: date => {
            // 设置结束日期 可以选择开始日期当天的日期
            let startTime = "";
            //获取当前e对应的日期 xxxx/xx/xx
            let curD = new Date(e).toLocaleDateString();
            //判断 选择日期e的毫秒数与00:00时的毫秒数比较大小，增加这个判断是因为开始选择的时分是00:00时，结束日期的不可选日期多了当前日期前面的一天
            // 可以把这个判断去掉试一下直接：
            //startTime = e ? new Date(e).valueOf() - 86400000  : "";  
            //return date && date.valueOf() < startTime;
            if (new Date(curD).valueOf() < new Date(e).valueOf()) {            
                //86400000 = 1 * 24 * 60 * 60 * 1000 是一天(24小时)的毫秒数
                startTime = e ? new Date(e).valueOf() - 86400000  : "";
            } else {
              startTime = e ? new Date(e).valueOf() : "";
            }
            return date && date.valueOf() < startTime;
        }
      };
    },

然后出现问题3

选择的时分是2019-08-06 00:03时，结束时间的不可选就无法精确到小时分钟了

解决办法是，表单验证判断下选择的时间：

    const validateEndDate = (rule, value, callback) => {
      if (value && value != "") {
        if(new Date(this.form.endDate).valueOf() > new Date(this.form.beginDate).valueOf()){
          callback();
        } else {
          callback(new Error("结束时间要晚于开始时间，请选择时间!"));
        }
      } else {
        callback();
      }
    };
    
    rules:{          
        beginDate: [
          {
            required: true,
            type: "string",
            message: "请选择开始时间!",
            trigger: "change"
          }
        ],
        endDate: [
          {
            required: true,
            type: "string",
            message: "请选择结束时间!",
            trigger: "change"
          },          
          {
            validator: validateEndDate,
            trigger: "change"
          }
        ]
      }
    
    

查看最终的示例代码

最终效果如下：

哎，也算是没办法的办法了。。。。