日历选择：周一到周日固定、选择当前周、上一周、下一周的日期。

1. 其中日期是分为前一周、当前周、下一周三段时间戳来计算的。

2. 周一到周日的时间戳、我是根据第一天的时间戳firstTime来往后推的。

   perTime = firstTime + i * 24 * 60 * 60 * 1000
   

3. 每次点击上周下周时候重新计算下当前年月。

图标使用到的是vant的icon

1、calendar.vue

<template>
    <div class="calendar">
      <div class="calendar-header">
        <div class="calendar-year">{{ currentYear }}年{{ currentMonth }}月</div>
        <van-icon name="arrow-left"  @click="prevWeek" class="arrow" />
        <van-icon name="arrow" @click="nextWeek" class="right-arrow" />
      </div>
      <div class="calendar-date">
        <div class="week-list">
          <span v-for="(item,index) in weekList" class="week" :key="index">{{item}}</span>
        </div>
        <div class="date-list">
          <span v-for="(item,index) in dateList" class="date" :key="index" :class="actDateTime === item.time ? 'act':''" @click="changeDate(item,index)">
            {{currentTime === item.time ? '今': item.day}}
          </span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      currentYear: '',//年
      currentMonth: '',//月
      currentTime: '', //当前时间戳
      actDateTime: '',//选中时间戳
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      dateList: [], //日期列表
    }
  },
  mounted() {
    this.initDate()
  },
  methods: {
    initDate() {
      //获取当前日期
      let date = new Date()
      let time = date.getTime()
      //计算年月日
      this.calculateCurrentDate(time)

      //今天是周几
      let currentWeek = this.formatWeek(date.getDay()) //0 周日 1-6 周一到周六
      let currentWeekIndex =  this.weekList.findIndex(el=>el === currentWeek)

      this.currentTime = time
      this.actDateTime = time

      let firstTime = time - (currentWeekIndex + 1)  * 24 * 60 * 60 * 1000 //获取第一天的时间戳
      this.calculateWeek(firstTime,'curr') //计算当前周

      //设置今日日期
      let today = {
        time: this.currentTime,
        day: date.getDate()
      }
      this.changeDate(today)
    },
    formatWeek(day) {
      let week = ''
      switch (day) {
        case 1: week = '一';break;
        case 2: week = '二';break;
        case 3: week = '三';break;
        case 4: week = '四';break;
        case 5: week = '五';break;
        case 6: week = '六';break;
        case 0: week = '日';break;
      }
      return week
    },
    //计算周
    calculateWeek(firstTime,type) {
      this.calculateCurrentDate(firstTime)
      let arr = []
      for(let i = 1 ; i <= 7 ;i++) {
        let perTime = ''
        if(type === 'next' || type === 'curr') {
          perTime = firstTime + i * 24 * 60 * 60 * 1000
        }else {
          perTime = firstTime - i * 24 * 60 * 60 * 1000
        }
        arr.push({
          time: perTime, //时间戳
          day: (new Date(perTime)).getDate() //几号
        })
      }
      if(type === 'prev') {
        this.dateList = arr.reverse()
      }else {
        this.dateList = arr
      }
    },
    //下一周
    nextWeek() {
      this.calculateWeek(this.dateList[6].time,'next')
    },
    //上一周
    prevWeek() {
      this.calculateWeek(this.dateList[0].time,'prev')
    },
    //计算年、月
    calculateCurrentDate(time) {
      let date = (new Date(time))
      //计算年
      this.currentYear = date.getFullYear()
      //计算月份
      this.currentMonth = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
    },
    changeDate(item) {
      this.calculateCurrentDate(item.time)
      let day = item.day  <= 9 ? '0' + item.day : item.day
      let date = this.currentYear + '-'+ this.currentMonth + '-' + day
      this.actDateTime = item.time
      this.$emit('changeDate',date)
    }
  }
}
</script>
<style scoped lang="less">
.calendar {
  font-size: 14px;
  background: #FFFFFF;
  color: #999;
  padding: 16px;
  .calendar-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #282828;
    padding: 0 8px;
    .arrow {
      margin-left: auto;
      margin-right: 16px;
      &:active {
        color: #f8f9fa;
        transition: all ease-in-out .1s;
      }
    }
   .right-arrow:active {
      color: #f8f9fa;
      transition: all ease-in-out .1s;
    }
  }
  .calendar-date {
    .week-list, .date-list {
      display: flex;
      justify-content: space-between;
      color: #181818;
      .date {
        color: #999999;
      }

      .act {
        color: red;
        font-weight: bold;
        transition: all ease-in-out .1s;
      }

      span {
        flex: 1;
        text-align: center;
      }
    }

    div + div {
      margin-top: 8px;
    }
  }
}

</style>

2、使用

<template>
  <div>
    <calendar @changeDate="changeDate"></calendar>
    日期是: {{date}}
  </div>

</template>

<script>
import calendar from "@/components/calendar/calendar.vue"
export default {
  components: {
    calendar
  },
  data() {
    return {
      date: ''
    }
  },
  methods: {
    changeDate(date) {
      this.date = date
      console.log(date,'日期是')
    }
  }
}
</script>