功能要求:

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

代码片段:(其中最重要的就是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为什么没有给出明确的解决实例,但是肯定有解决办法,果然功夫不负有心人,特别感谢曹同学的帮助。

 

Logo

前往低代码交流专区

更多推荐