获取日期范围内的所有日期（每周，每月，任意两个日期）

比较常见的效果，如图，本周，本月，上一周下一周，上一月下一月…


这里利用moment.js实现

1. 安装moment.js
   npm install moment --save # npm
   yarn add moment # Yarn
2. 我把有关的方法放在了getdate.js中，直接放代码

// 引入 moment 时间插件
import moment from "moment";
moment.locale("zh-cn");

export default {
  // 获取今日
  getToday() {
    let today = "";
    today = moment(moment().valueOf()).format("MM-DD dddd");
    return today;
  },
  // 获取每周中所有日期 （周一到周日）
  getWeekDays(n) {
    let daysList = [];
    for (var i = 0; i < 7; i++) {
      let day = moment(
        moment()
          .week(moment().week() + n)
          .startOf("week")
          .add(i, "days")
          .valueOf()
      ).format("MM-DD dddd");
      daysList.push(day);
    }
    return daysList;
  },
  // 获取每月中所有日期  （当月1号开始）
  getMonthDays(n) {
    let daysList = [];
    let daysInMonth = moment()
      .month(moment().month() + n)
      .daysInMonth(); // 当前月天数
    for (var i = 0; i < daysInMonth; i++) {
      let day = moment(
        moment()
          .month(moment().month() + n)
          .startOf("month")
          .add(i, "days")
          .valueOf()
      ).format("MM-DD dddd");
      daysList.push(day);
    }
    return daysList;
  },
  // 获取任意两个日期中的所有日期
  enumerateDaysBetweenDates(startDate, endDate) {
    let daysList = [];
    const start = moment(startDate);
    const end = moment(endDate);
    const day = end.diff(start, "days");
    daysList.push(start.format("MM-DD dddd"));
    for (let i = 1; i <= day; i++) {
      daysList.push(start.add(1, "days").format("MM-DD dddd"));
    }
    return daysList;
  }

3. 使用上述js,还是直接放代码，记得先引人

这个html部分，对应效果图上的按钮。。

  <el-button type="primary" size="mini" @click="clickWeek(1)">本周</el-button>
      <el-button plain size="mini" @click="clickWeek(0)">上一周</el-button>
      <el-button plain size="mini" @click="clickWeek(2)">下一周</el-button>
      <el-button plain size="mini" @click="clickMonth(1)">本月</el-button>
      <el-button plain size="mini" @click="clickMonth(0)">上一月</el-button>
      <el-button plain size="mini" @click="clickMonth(2)">下一月</el-button>
      <el-date-picker
        size="mini"
        v-model="daterange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="changeDate"
      ></el-date-picker>

js部分

  // 日期选择器选择日期
    changeDate() {
      if (this.daterange == null) {
        this.clickWeek(1)
      } else {
        this.dateList = getDate.enumerateDaysBetweenDates(
          this.daterange[0], // this.daterange是日期范围
          this.daterange[1]
        )
      }
    },
    // 点击周，n =上一周0，本周1，下一周2
    clickWeek(n) {
      this.w = [this.w - 1, 0, this.w + 1][n] // this.w周
      this.dateList = getDate.getWeekDays(this.w)
    },
    // 点击月,n =上一月0，本月1，下一月2
    clickMonth(n) {
      this.m = [this.m - 1, 0, this.m + 1][n] // this.m月
      this.dateList = getDate.getMonthDays(this.m)
    },