vue计算el-date-picker组件开始时间和结束时间的时间差

本文主要是介绍vue计算el-date-picker组件开始时间和结束时间的时间差，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 :rules="dataRule"定义在el-form中

还需要在el-form-item定义属性 prop="date"

data中规则

   dataRule: {
        date: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change",
            type: "array",
          },
        ],
      },

框架

  <el-form-item
        label="请假时间："
        label-width="150px"
        size="medium"
        style="width: 490px;align='right'"
        prop="date"
      >
        <el-date-picker
          v-model="leaveTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请假时长" prop="totalTime">
        <el-input
          v-model="getTim"
          :disabled="true"
          placeholder="请假时长，单位秒"
        ></el-input>
      </el-form-item>

data

 form: {
        totalTime: "",
      },
      startTime: "",
      endTime: "",

computed: {
    getTim: function () {
      let startTime;
      let endTime;
      console.log("isNull???");
      if (isNull(this.leaveTime)) {
        startTime = new Date();
        endTime = new Date();
        console.log("isNull");
      } else {
        startTime = isNull(this.leaveTime[0]) ? new Date() : this.leaveTime[0];
        endTime = isNull(this.leaveTime[1]) ? new Date() : this.leaveTime[1];
        console.log(getTime(startTime, endTime));
        console.log("computed");
      }
      return getTime(startTime, endTime);
    },
  },

引入的定义方法

import { getTime } from "@/utils/dateUtils";
import { isNull } from "@/utils/validate";

dateUtils

/**
 * 计算两个时间的差值
 */
export function getTime(beginTime, endTime) {
    console.log("进入了自定义getTime")
    var dateDiff = endTime.getTime() - beginTime.getTime();//时间差的毫秒数
    console.log("自定义getTime的开始时间：", endTime.getTime())
    console.log("自定义getTime的结束时间：", beginTime.getTime())
    console.log("自定义getTime的dateDiff", dateDiff)
    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
    var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
    //计算相差秒数
    var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000)
    console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
    // return "相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟";
    //这里要天数
    return "相差 " + dayDiff + "天 ";
}

validate

export function isNull(str) {
    if (str === null || str === undefined || str.length === 0) {
        return true
    }
    return false
}

这篇关于vue计算el-date-picker组件开始时间和结束时间的时间差的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！