Vue + Element UI 实现了一个周选择器

如上图，下面贴代码

<template>
  <div>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectYear"
      format="yyyy 年"
      value-format="yyyy"
      type="year"
      :clearable = "false"
      placeholder="选择年">
    </el-date-picker>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectMonth"
      format="MM 月"
      value-format="MM"
      type="month"
      :clearable = "false"
      placeholder="选择月">
    </el-date-picker>
    <el-button type="success" @click="setToday">本周</el-button>
    <el-button type="info" @click="lastWeek">&lt;&lt;</el-button>
    <el-button type="info" @click="nextWeek">&gt;&gt;</el-button>
    <span>{{weekStart}}</span>
    <span>~</span>
    <span>{{weekEnd}}</span>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data () {
    return {
      currentDate: new Date()
    }
  },
  mounted () {
    this.currentDate = new Date()
    this.setCallback()
  },
  computed: {
    selectYear: {
      get: function () {
        return this.$moment(this.currentDate).format('YYYY')
      },
      set: function (newValue) {
        let _date = newValue + '-' + this.selectMonth + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      }
    },
    selectMonth: {
      get: function () {
        return this.$moment(this.currentDate).format('MM')
      },
      set: function (newValue) {
        let _date = this.selectYear + '-' + newValue + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      }
    },
    weekStart () {
      return this.getTime(this.currentDate, 0)
    },
    weekEnd () {
      return this.getTime(this.currentDate, -6)
    }
  },
  methods: {
    lastWeek () {
      this.currentDate = this.$moment(this.currentDate).subtract(7, 'days').toDate()
      this.setCallback()
    },
    nextWeek () {
      this.currentDate = this.$moment(this.currentDate).add(7, 'days').toDate()
      this.setCallback()
    },
    setToday () {
      this.currentDate = new Date()
      this.setCallback()
    },
    setCallback () {
      if (this.weekStart && this.weekEnd) {
        // 把开始天和结束天相隔的所有日期天放入一个数组保存
        let diffDate = []
        let days = this.$moment(this.weekEnd).diff(this.weekStart, 'days')
        for (let i = 0; i <= days; i++) {
          diffDate.push(this.$moment(this.weekStart).add(i, 'days').format('YYYY-MM-DD'))
        }
        this.$emit('callback', this.weekStart, this.weekEnd, diffDate)
      }
    },
    // 上周的开始时间
    // console.log(getTime(7));
    // 上周的结束时间
    // console.log(getTime(1));
    // 本周的开始时间
    // console.log(getTime(0));
    // 本周的结束时间
    // console.log(getTime(-6));
    // 下周的开始时间
    // console.log(getTime(-7));
    // 下周结束时间
    // console.log(getTime(-13));
    getTime (selectDate, n) {
      let coloneSelectDate = _.cloneDeep(selectDate)
      let year = selectDate.getFullYear()
      // 因为月份是从0开始的,所以获取这个月的月份数要加1才行
      let month = coloneSelectDate.getMonth() + 1
      let date = coloneSelectDate.getDate()
      let day = coloneSelectDate.getDay()
      // 判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
      if (day !== 0) {
        n = n + (day - 1)
      } else {
        n = n + day
      }
      if (day) {
        // 这个判断是为了解决跨年的问题,月份是从0开始的
        if (month <= 1) {
          year = year - 1
          month = 12
        }
      }
      coloneSelectDate.setDate(coloneSelectDate.getDate() - n)
      year = coloneSelectDate.getFullYear()
      month = coloneSelectDate.getMonth() + 1
      date = coloneSelectDate.getDate()
      let s = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date)
      return s
    }
  }
}
</script>

 用了一下lodash库的深度拷贝函数，不喜欢自己去掉实现自己的函数也可以，反正我是拿来主义

使用代码

<template>
  <week-selector @callback="afterSelectWeek"></week-selector>
<template>
<script>
import WeekSelector from '@/components/WeekSelector.vue'
import _ from 'lodash'
export default {
  data () {
    return {
      innerWeekStart: null,
      innerWeekEnd: null,
      innerDiffDate: [],
    }
  },
  methods: {
    afterSelectWeek (weekStart, weekEnd, diffDate) {
      if (weekStart && weekEnd && diffDate) {
        this.innerWeekStart = this.$moment(weekStart + ' ' + '00:00:00').toDate()
        this.innerWeekEnd = this.$moment(weekEnd + ' ' + '23:59:59').toDate()
        this.innerDiffDate = diffDate
      }
    },
  }
}
</script>

选择周以后，通过callback回调函数获得选择周的开始日期，结束日期，以及这一周的每一天(结果放到了diffDate数组里面)