基于element-ui的Vue计算工作日组件

之前看了一个计算工作日的函数,所以就想到做一个Vue的组件,方便以后直接使用 

<template>
  <div class="hello">
    <div class="block date_box_left">
      <span class="demonstration">开始时间:</span>
      <el-date-picker v-model="value1" type="date" placeholder="选择日期时间">
      </el-date-picker>
    </div>
    <div class="block date_box_right">
      <span class="demonstration">结束时间:</span>
      <el-date-picker v-model="value2" type="date" placeholder="选择日期时间">
      </el-date-picker>
    </div>
    <div class="date_confirm">
      <el-button @click="computeDaysDelta(value1, value2)">确认</el-button>
    </div>
    <p>结果:{{ result }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        result: ''
      }
    },
    computed: {
    },
    methods: {
      fmtDate: function(date){   //时间格式化
        var date = date;
        var y = 1900+date.getYear();
        var m = "0"+(date.getMonth()+1);
        var d = "0"+date.getDate();
        return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
      },
      stringToDate: function(dateString){  //转时间戳
        var dateString = this.fmtDate(dateString); 
        dateString = dateString.split('-');
        return new Date(dateString[0], dateString[1] - 1, dateString[2]);
      },
      computeDaysDelta: function(date1, date2){   //核心计算函数
        var date1 = this.stringToDate(date1);
        var date2 = this.stringToDate(date2);
        var delta = (date2 - date1) / (1000 * 60 * 60 * 24) + 1;
        var weekEnds = 0;
        if (delta < 0) {
          for (let i = delta; i < 0; i++) {
            if (date1.getDay() == 0 || date1.getDay() == 6) {
              weekEnds++;
            }
            date1 = date1.valueOf();
            date1 -= 1000 * 60 * 60 * 24;
            date1 = new Date(date1);
          }
          this.result = delta + weekEnds;
          return this.result;
        } else {
          for (let i = 0; i < delta; i++) {
            var superArr = ["2018-07-01","2018-07-03"]     //设置法定节假日
            var superDate = this.fmtDate(date1);
            var status = superArr.indexOf(superDate);
            if (date1.getDay() == 0 || date1.getDay() == 6 || status!==-1) {
              weekEnds++;
            }
            date1 = date1.valueOf();
            date1 += 1000 * 60 * 60 * 24;
            date1 = new Date(date1);
          }
          this.result = delta - weekEnds;
          return this.result;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .date_box_left{
    display: inline-block;
    margin-left: 20px;
  }
  .date_box_right{
    display: inline-block;
    margin-left: 20px;
  }
  .date_confirm{
    display: inline-block;
    margin-left: 20px;
  }
</style>

猜你喜欢

转载自blog.csdn.net/qq_36414265/article/details/81109792
今日推荐