vue 选择时间 显示天数及小时

使用element date-picker 作为时间控件

 <el-date-picker v-model="form.date" @change="getdate" type="datetime" placeholder="选择完成时间"></el-date-picker>

选择好时间后 把选中的值进行时间计算

	//date-picker改变的时候 选取时间值
      getdate(e) {
        this.form.duration = ''
        this.difference(this.form.date)
      },
      // 时间计算
      difference(endTime) {
        var dateBegin = new Date();
        var dateEnd = new Date(endTime);
        var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
        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 +
          "秒"
        );
        this.form.duration = dayDiff + '天' + hours + '时'
      }

效果