vue+elementUI实现日期快选组件

目录

日期工具包

代码实现

---

如图所示：

日期工具包

   dateUtil.js

var now = new Date(); //当前日期 
var nowDayOfWeek = now.getDay(); //今天本周的第几天 
var nowDay = now.getDate(); //当前日 
var nowMonth = now.getMonth(); //当前月 
var nowYear = now.getFullYear(); //当前年 



var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
var lastMonth = lastMonthDate.getMonth();

let dateUtil = {
    nowYear: new Date().getFullYear(),
    displayTime: function (timestr) {
        if (!timestr) {
            return ''
        }
        timestr = timestr.replace(/-/g, '/'); // ios 系统兼容
        var result = timestr;
        var dateTimeStamp = new Date(timestr).getTime();
        var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
        var hour = minute * 60;
        var day = hour * 24;
        var week = day * 7;
        // var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime(); //获取当前时间毫秒
        var diffValue = now - dateTimeStamp; //时间差

        if (diffValue < 0) {
            return;
        }
        var minC = diffValue / minute; //计算时间差的分，时，天，周，月
        var hourC = diffValue / hour;
        var dayC = diffValue / day;
        var weekC = diffValue / week;
        var monthC = diffValue / month;
        if (monthC >= 1 && monthC <= 3) {
            result = " " + parseInt(monthC) + "月前"
        } else if (weekC >= 1 && weekC <= 3) {
            result = " " + parseInt(weekC) + "周前"
        } else if (dayC >= 1 && dayC <= 6) {
            result = " " + parseInt(dayC) + "天前"
        } else if (hourC >= 1 && hourC <= 23) {
            result = " " + parseInt(hourC) + "小时前"
        } else if (minC >= 1 && minC <= 59) {
            result = " " + parseInt(minC) + "分钟前"
        } else if (diffValue >= 0 && diffValue <= minute) {
            result = "刚刚"
        } else {
            var datetime = new Date();
            datetime.setTime(dateTimeStamp);
            var Nyear = datetime.getFullYear();
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            // var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
            // var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            // var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            // result = Nyear + "-" + Nmonth + "-" + Ndate + ' ' + Nhour + ':' + Nminute
            result = Nyear + "-" + Nmonth + "-" + Ndate
        }
        return result;
    },
    /**
     * 
     */
    calcDateDiffDay(date1, date2) {
        let minute = 1000 * 60;
        let hour = minute * 60;
        let day = hour * 24;
        let diffDay = parseInt((date1.getTime() - date2.getTime()) / day)
        return diffDay
    },
    getDay: function (day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = this.doHandleMonth(tMonth + 1);
        tDate = this.doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth: function (month) {
        var m = month;
        if (month.toString().length == 1) {
            m = "0" + month;
        }
        return m;
    },

    //获得某月的天数 
    getMonthDays: function (myMonth) {
        var monthStartDate = new Date(nowYear, myMonth, 1);
        var monthEndDate = new Date(nowYear, myMonth + 1, 1);
        var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
    },
    //获得某月最后一天
    getMonthLastday: function (year, month) {
        var day = new Date(year, month, 0);
        return day.Format('yyyy-MM-dd');
    },


    //获得本周的开始日期 
    getWeekStartDate: function () {
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
        return weekStartDate.Format('yyyy-MM-dd');
    },

    //获得本周的结束日期 
    getWeekEndDate: function () {
        var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek));
        return weekEndDate.Format('yyyy-MM-dd');
    },

    /**
     * 获得某年某月的开始日期 
     * @param {*} year 默认今年
     * @param {*} month 默认本月
     */
    getMonthStartDate(year = nowYear, month = nowMonth - 1) {
        var monthStartDate = new Date(year, month + 1, 1);
        return monthStartDate.Format('yyyy-MM-dd');
    },

    /**
     * 获得某年某月的结束日期
     * @param {*} year 默认今年
     * @param {*} month 默认本月
     */
    getMonthEndDate(year = nowYear, month = nowMonth + 1) {
        var monthEndDate = new Date(year, month, 0);
        return monthEndDate.Format('yyyy-MM-dd');
    },

    //获得上月开始时间
    getLastMonthStartDate: function () {
        var year = lastMonth == 11 ? nowYear - 1 : nowYear; // 判断是否当前年的第一月
        var lastMonthStartDate = new Date(year, lastMonth, 1);
        return lastMonthStartDate.Format('yyyy-MM-dd');
    },

    //获得上月结束时间
    getLastMonthEndDate: function () {
        var year = lastMonth == 11 ? nowYear - 1 : nowYear; // 判断是否当前年的第一月
        var lastMonthEndDate = new Date(year, lastMonth, this.getMonthDays(lastMonth));
        return lastMonthEndDate.Format('yyyy-MM-dd');
    },

    //获得上月开始时间
    getYearStartDate: function () {
        let year = new Date().getFullYear()
        return year + `-01-01`;
    },

    //获得上月结束时间
    getYearEndDate: function () {
        let year = new Date().getFullYear()
        return year + `-12-31`;
    },


    //获得本季度的开始月份
    getQuarterStartMonth: function () {
        var quarterStartMonth = 0;
        if (nowMonth < 3) {
            quarterStartMonth = 0;
        }
        if (2 < nowMonth && nowMonth < 6) {
            quarterStartMonth = 3;
        }
        if (5 < nowMonth && nowMonth < 9) {
            quarterStartMonth = 6;
        }
        if (nowMonth > 8) {
            quarterStartMonth = 9;
        }
        return quarterStartMonth;
    },



    //获得本季度的开始日期
    getQuarterStartDate: function () {
        var quarterStartDate = new Date(this.nowYear, this.getQuarterStartMonth(), 1);
        return quarterStartDate.Format("yyyy-MM-dd");
    },
    //获得本季度的结束日期
    getQuarterEndDate: function () {
        var quarterEndMonth = this.getQuarterStartMonth() + 2;
        var quarterEndDate = new Date(this.nowYear, quarterEndMonth, this.getMonthDays(quarterEndMonth));
        return quarterEndDate.Format("yyyy-MM-dd");
    },
    //获得某月的天数
    getMonthDays: function (myMonth) {
        var monthStartDate = new Date(this.nowYear, myMonth, 1);
        var monthEndDate = new Date(this.nowYear, myMonth + 1, 1);
        var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
    },
}

export default dateUtil

主要方法：

方法名	参数	说明
displayTime	timestr	日期显示为“…分钟前 …天前……
calcDateDiffDay	date1, date2	比较2个日期，返回相差的天数
getDay	day	获取今天之前/之后的日期

使用：

import dateUtil from 'utils/dateutil.js'

getDay()

dateUtil.getDay(-1); // 获取前一天日期
dateUtil.getDay(0); // 获取今天日期
dateUtil.getDay(1); // 获取明天日期

代码实现

index.vue

<template>
  <el-popover v-model="showPopover"
              style="padding:8px 30px;border:1px solid #f0f0f0;margin:0 20px">
    <div style="padding:20px 5px">
      <p>选择日期</p>
      <div style="margin:10px 20px 30px 20px">
        <el-date-picker v-model="beginDate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        style="width:150px;font-size:12px;padding-left:3px;"
                        placeholder="开始时间"></el-date-picker>
        - <el-date-picker v-model="finalDate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        style="width:150px;font-size:12px;padding-left:3px;"
                        placeholder="结束时间"></el-date-picker>
      </div>
      <p>快捷日期</p>
      <div style="margin-top:30px">
        <el-row>
          <el-col :span="12">
            <el-button type="text"
                       @click="setDay(0)">今天</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="text"
                       @click="setDay(-1, true)">昨天</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-button type="text"
                       @click="setDay(-7)">过去7天</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="text"
                       @click="setDay(-14)">过去14天</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-button type="text"
                       @click="setDay(-30)">过去30天</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="text"
                       class="text-red"
                       @click="clear">清空</el-button>
          </el-col>
        </el-row>
      </div>
      <hr style="border:1px solid #f0f0f0;margin:20px;" />
      <el-button type="primary"
                 @click="showPopover = false;handleConfirm()">确定</el-button>
      <el-button @click="showPopover = false">取消</el-button>
    </div>
    <span slot="reference"
          style="color:#999">{{startDate?startDate:'选择开始时间'}} - {{endDate?endDate:'选择结束时间'}}</span>
  </el-popover>
</template>
<script>
import dateUtil from 'utils/dateutil.js'

export default {
  props: {
    startDate: String,
    endDate: String
  },
  data() {
    return {
      beginDate: '',
      finalDate: '',
      showPopover: false
    }
  },

  created() {},
  computed: {},
  methods: {
    handleConfirm() {
      let value = { startDate: this.beginDate, endDate: this.finalDate }
      this.$emit('afterDateSelect', value)
    },
    clear() {
      this.beginDate = ''
      this.finalDate = ''
    },
    // 过去几天
    setDay(day, isSingleDay) {
      this.beginDate = dateUtil.getDay(day)
      if (isSingleDay) {
        this.finalDate = dateUtil.getDay(day)
      } else {
        this.finalDate = dateUtil.getDay(0)
      }
    }
  },
  mounted() {
    this.beginDate = this.startDate ? this.startDate : dateUtil.getDay(0)
    this.finalDate = this.endDate ? this.endDate : dateUtil.getDay(0)
  }
}
</script>

​