最详细前端vue框架实现结束日期大于开始日期以及计算两个日期天数差

叫我啊哈

已于 2022-10-09 11:48:49 修改

阅读量1.9k

点赞数 2

文章标签：前端 vue.js visual studio code

于 2022-09-29 11:57:24 首次发布

本文链接：https://blog.csdn.net/qq_51568712/article/details/127103518

版权

我这里用的是@change，它是根据焦点来触发的，就是说你的框（输入框或者选择框等）发生变化而且失去焦点（失去焦点就是鼠标从该框上移开并点击别的地方，解释可能不太恰当哈）时触发。

首先在我们添加或者修改弹出框中的开始日期和结束日期（我这里是出差日期和返差日期）上加上@change="changeStart"和@change="changeEnd"，changeStart和changeEnd就是我们的方法名（可自己定义）。（下面的 </el-row> <el-row>是多余的记得去掉）

复制代码往下看

<el-col :span="12">
            <el-form-item label="出差日期" prop="evectionTime">
              <el-date-picker v-model="form.evectionTime"
              type="date"
              @change="changeStart"
              value-format="yyyy-MM-dd"
              placeholder="请选择出差时间"
              style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返差日期" prop="backTime">
              <el-date-picker v-model="form.backTime"
              type="date"
              @change="changeEnd"
              value-format="yyyy-MM-dd"
              placeholder="请选择返差时间"
              :clearable="true"
              style="width: 100%;" />
            </el-form-item>
          </el-col>

接下来就是在method中写我们的方法了

上面的方法给了详细注释下面同理就不再给了。

代码复制在下图

// 限制选择出差日期
     changeStart() {
        if (this.form.backTime != undefined||this.form.evectionTime != undefined) {
          if (this.form.backTime < this.form.evectionTime) {
            this.$alert("返差日期必须大于或等于出差日期！", { dangerouslyUseHTMLString: true });
            this.form.evectionTime = undefined;
          }
        var ONE_DAY = 1000 * 60 * 60 * 24
          console.log(this.form.backTime)
          var date1_ms = new Date(this.form.backTime).getTime()
          var date2_ms = new Date(this.form.evectionTime).getTime()
          var difference_ms = Math.abs(date1_ms - date2_ms)
          this.form.evectionNumber =Math.round(difference_ms/ONE_DAY+1);
        }
      },
       // 限制选择返差日期
      changeEnd() {
        console.log(this.form.backTime);
        if (this.form.backTime != undefined||this.form.evectionTime != undefined) {
          if (this.form.backTime < this.form.evectionTime) {
            this.$alert("返差日期必须大于或等于出差日期！", { dangerouslyUseHTMLString: true });
            this.form.backTime = undefined;
          }
          var ONE_DAY = 1000 * 60 * 60 * 24
          console.log(this.form.backTime)
          var date1_ms = new Date(this.form.backTime).getTime()
          var date2_ms = new Date(this.form.evectionTime).getTime()
          var difference_ms = Math.abs(date1_ms - date2_ms)
          this.form.evectionNumber =Math.round(difference_ms/ONE_DAY+1);
        }
      },

为什么要写两个？是因为你可能先选开始日期也可能先选结束日期，changeStart（）方法是当你先选了结束日期时触发的，changeEnd（）方法是你选开始日期时触发的。

效果如下：

这是先选开始日期时，结束日期小于开始日期给的提示。