VUE-日期选择器-结束时间>开始时间

功能要求：

限制结束时间选择范围，结束时间能够选择的起始日期，随着开始时间的选择而变化，也就是保证结束时间时钟>=开始时间。

代码片段：(其中最重要的就是startValue）

<script>

//定义全局变量：开始协商记录开始日期
let startValue = 86400000;

export default{

       data() {

              //发送开始协商内容
              startNegotiateModel: {
              projectId: "", //项目id
              startTime: "", //项目开始时间
              endTime: "", //项目结束时间
              negotiateContent: "" //开始协商内容
             
              }
              }
}

</script>

<template>

        <label>开始时间：</label>
        <DatePicker
          v-model="startNegotiateModel.startTime"
          type="date"
          :options="startDateOptions"
          @on-change="handleChange"
          placeholder="开始时间"
          :editable="false"
          style="width: 150px"
        ></DatePicker>

        <label class="fromlift">结束时间：</label>
        <DatePicker
          v-model="startNegotiateModel.endTime"
          type="date"
          :options="endDateOptions"
          placeholder="结束时间"
          :editable="false"
          style="width: 150px"
        ></DatePicker>

 </template>

 methods: {

 //开始时间改变事件
    handleChange(date) {
      startValue = new Date(date).getTime();
      this.endDateOptions = {
        disabledDate(date) {
          return date && date.valueOf() < startValue - 86400000;
        }
      };
    }

}

实现效果：

开始日期选择了：2019-10-21

结束时间，只能选择2019-10-21之后的日期

 

总结：

不将就，以前做过类似的功能，通常都是在点击确定按钮之后，再去判断结束时间不能小于开始时间，这样做很不友好。这次做这个功能问了好多人，他们给出的建议也是在单击确定之后判断。但是我感觉这是一个时间控件很常见的功能，虽然不知道Vue为什么没有给出明确的解决实例，但是肯定有解决办法，果然功夫不负有心人，特别感谢曹同学的帮助。