前端Vue中实现时间大小的比较

最新推荐文章于 2024-09-18 16:02:03 发布

小码哥在码bug

最新推荐文章于 2024-09-18 16:02:03 发布

阅读量8.8k

点赞数 1

分类专栏： vue开发项目遇到的问题文章标签：前端

本文链接：https://blog.csdn.net/zwjl1017/article/details/124736751

版权

vue开发项目遇到的问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文记录了一位开发者在Vue项目中遇到的校验时间需求，主要涉及JavaScript的getTime()方法来比较日期。通过在表单中定义校验规则，并在计算属性中设置验证函数，确保任务起始时间不早于创建时间，从而实现时间校验功能。

摘要由CSDN通过智能技术生成

今天在一个新增功能中遇到了需要校验时间的需求，特此记录一下

首先我们要明白JavaScript中的getTime()方法

getTime()方法返回的值是自1970年1月1日00：00：00的毫秒数

那简单介绍完getTime()方法我们就开始实现在vue中校验时间的需求

第一步，我们校验时给form表单定义校验事件

 <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
    <el-form-item label="创建日期：" prop="createDate">
        <el-col :span="20">
          <el-date-picker style="width:100%" :disabled="true" v-model="dataForm.createDate" type="date"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="创建日期">
          </el-date-picker>
        </el-col>
      </el-form-item>
     <el-form-item label="任务时间：" prop="taskStartDate">
        <el-date-picker v-model="value" @change="getSTime" type="daterange" align="right"                     unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          <template slot-scope="scope">
            <span v-if="scope.row.taskStartDate">{{scope.row.taskStartDate}} 至                     
                      {{scope.row.taskEndDate}}
            </span>
          </template>
        </el-date-picker>
      </el-form-item>
</el-form>

第二步，在计算属性computed中定义校验规则，使用validator这个校验器去设定规则，如下代码

computed: {
      dataRule() {
         var validateConfirmPassword = (rule, value, callback) => {
          console.log(this.dataForm.createDate);
          console.log(this.value[0]);
// 为什么是this.value[0]，是因为填写任务时间的时候 填写了两个时间 一个起始时间 一个结束时间 我们要用起始时间去做校验 所以获取下标为0的值
          var createDate = new Date(this.dataForm.createDate).getTime()
          var tashDta = new Date(this.value[0]).getTime()
          console.log(createDate);
          console.log(tashDta);
          console.log(createDate - tashDta);
//  转化为毫秒数以后 如果（创建时间 - 起始时间）的运算结果大于0的时候 就触发设定的规则 否则就继续往下运行
        if ((createDate - tashDta) > 0) {
          callback(new Error("任务起始时间不能小于创建时间！"));
        } else {
          callback();
        }
        callback();
      };
        return {
            taskStartDate: [{
              validator: validateConfirmPassword,
              required: true,
              trigger: "change"
            }],
        };
      },
    },

有不对的地方，请大神多多指教