关于日期的取值-周视图、月视图（element 日历组件的自定义日期取周视图）

 element 日历组件可能需要用到的自定义日期；

小问题：展示指定日期的周视图；

插件使用 moment  

思路1：

1.取到当前日期是这一年的第几周；2.拿到获取指定年份指定周的起止日期；

这部分思路已实现之后，发现还有另外的思路； 实现方法：getWeekNumber，getWeekStartAndEnd

思路2：

moment可以直接取指定日期的startOf, 参数为isoWeek ， 意思是返回每周周一的日期，如此，加 + 7  则可以得到周视图；实现方法：getWeekDays

思路3：

是思路2的另版，省略了+7的计算，利用moment.endOf; 实现方法：getStartAndEndOfWeek

---

最后记录一下月视图的实现 

<template>
  <div>
    <el-calendar
      v-model="defaultDate"
      :range="selectedDate"
    />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    const targetDate = '2024-5-1'
    const rang = this.getStartAndEndOfWeek(targetDate)
    return {
      selectedDate: [rang.start, rang.end], // 当前日期范围为本周
      today: new Date(), // 今天的日期
      defaultDate: targetDate // 默认选中今天的日期
    }
  },
  created() {
    const targetDate = '2024-5-1'
    const targetYear = moment(targetDate).year()
    const weekNumber = this.getWeekNumber(targetDate)
    const rang = this.getWeekStartAndEnd(targetYear, weekNumber)

    const rang2 = this.getStartAndEndOfWeek(targetDate)
    console.log(targetDate, '是', targetYear, '年')
    console.log(targetDate, '是第', weekNumber, '周')
    console.log(targetDate, '起止周是', rang.start, rang.end)
    console.log(targetDate, '起止周是', rang2)
  },
  methods: {

    // 获取指定日期在指定年份的第几周
    getWeekNumber(date) {
      // 确保日期是按 ISO 周标准解析（周一作为周的开始）
      return moment(date).isoWeek()
    },

    // 周视图-思路1
    // 获取指定年份指定周的起始时间和结束时间
    getWeekStartAndEnd(year, weekNumber) {
      // 设置年份和周数
      const startOfWeek = moment().year(year).week(weekNumber).startOf('isoWeek')
      // ISO 标准中，周的开始为周一
      const endOfWeek = moment(startOfWeek).endOf('isoWeek')

      // 格式化日期以便更易于阅读
      const format = 'YYYY-MM-DD'
      return {
        start: startOfWeek.format(format),
        end: endOfWeek.format(format)
      }
    },

    // 周视图-思路3
    getStartAndEndOfWeek(date) {
      // 设置为该周的开始，ISO 标准中周一为一周的开始
      const startOfWeek = moment(date).startOf('isoWeek')
      // 设置为该周的结束，ISO 标准中周日为一周的结束
      const endOfWeek = moment(date).endOf('isoWeek')

      // 格式化日期以便更易于阅读
      const format = 'YYYY-MM-DD'
      return {
        start: startOfWeek.format(format),
        end: endOfWeek.format(format)
      }
    },

    // 周视图-思路2
    getWeekDays(date) {
      const days = []
      // 设置为该周的开始，ISO 标准中周一为一周的开始
      const current = moment(date).startOf('isoWeek')

      // 循环添加一周的每一天
      for (let i = 0; i < 7; i++) {
        days.push(current.format('YYYY-MM-DD'))
        current.add(1, 'days') // 增加一天
      }

      return days
    },
    // 完整的月视图
    getFullCalendarMonth(year, month) {
      // 设定月份的第一天和最后一天
      const startOfMonth = moment([year, month]).startOf('month')
      const endOfMonth = moment([year, month]).endOf('month')

      // 找到月初所在周的周一和月末所在周的周日
      const startOfCalendar = startOfMonth.startOf('isoWeek')
      const endOfCalendar = endOfMonth.endOf('isoWeek')

      // 遍历并收集所有日期
      const days = []
      const current = startOfCalendar.clone() // 使用 clone() 避免修改原始日期

      while (current.isSameOrBefore(endOfCalendar)) {
        days.push(current.format('YYYY-MM-DD'))
        current.add(1, 'days')
      }

      return days
    }

  }
}
</script>