日期选择器el-date-picker选择周、月、年

 <el-date-picker
            v-if="isTimeType==='date'"
            :clearable="false"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="date"
            type="daterange"
            :picker-options="{disabledDate:dateOptions,pickerOptions}"
            @change="changeData(date)"
          >
          </el-date-picker>
          <div class="date-picker" v-if="isTimeType==='week'">
            <el-date-picker
              v-model="date"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="选择周"
              @change="handleWeekChange"
              :picker-options="{disabledDate:dateOptions,firstDayOfWeek: 1}"
            ></el-date-picker>
            <div class="date-range">{{ weekRange }}</div>
          </div>
          <div class="date-picker" v-if="isTimeType==='month'">
            <el-date-picker
              v-model="date"
              type="month"
              format="yyyy - MM"
              placeholder="选择月份"
              @change="handleMonthChange"
              :pickerOptions="{disabledDate:dateOptions}"
            ></el-date-picker>
            <div class="date-range">{{ timeRange }}</div>
          </div>
          <div class="date-picker" v-if="isTimeType==='year'">
            <el-date-picker
              v-model="date"
              type="year"
              format="yyyy"
              placeholder="选择年份"
              :pickerOptions="{disabledDate:dateOptions}"
              @change="getYearRange"
            ></el-date-picker> 

export default {
data(){
    return{
        date: '',
        startDate: '',
        endDate: '',
    }

}
method：{

// 周选择器
    handleWeekChange(value) {
      if (value) {
        console.log(value)
        // 获取周的第一天（周一）
        const weekStart = new Date(value)
        const dayOfWeek = weekStart.getDay() // 周日是0，周一是1，...
        // 如果周的第一天不是周一，则回退到上一周的周一
        if (dayOfWeek !== 1) {
          weekStart.setDate(weekStart.getDate() - dayOfWeek + 1)
        }

        // 计算周的最后一天（周日）
        const weekEnd = new Date(weekStart)
        weekEnd.setDate(weekEnd.getDate() + 6)

        // 存储周的开始和结束日期
        this.startDate = weekStart
        this.endDate = weekEnd
        this.sonData.startDate = this.formatDate(this.startDate)
        this.sonData.endDate = this.formatDate(this.endDate)

        // console.log('this.endDate',this.formatDate(this.endDate))
      }
    },
    // 月选择器获取月份日期范围
    handleMonthChange(value) {
      // 确保value是一个有效的Date对象
      if (value) {
        // 获取月份的第一天
        const firstDay = new Date(value.getFullYear(), value.getMonth(), 1)

        // 获取下一个月的第一天
        const nextMonthFirstDay = new Date(value.getFullYear(), value.getMonth() + 1, 1)

        // 获取当前月份的最后一天（即下一个月第一天的前一天）
        const lastDay = new Date(nextMonthFirstDay - 86400000) // 一天有86400000毫秒

        // 更新组件数据
        this.startDate = this.formatDate(firstDay)
        this.endDate = this.formatDate(lastDay)
        this.timeRange = this.startDate + ' 至 ' + this.endDate
        this.sonData.startDate = this.startDate
        this.sonData.endDate = this.endDate
      }
    },
    // 年选择器
    getYearRange(value) {
      // 确保value是一个有效的Date对象
      if (value) {
        this.startDate = ''
        this.endDate = ''
        // 获取年份的第一天（1月1日）
        const firstDay = new Date(value.getFullYear(), 0, 1) // 月份从0开始，0代表1月

        // 获取年份的最后一天（12月31日）
        const lastDay = new Date(value.getFullYear(), 11, 31, 23, 59, 59, 999) // 月份从0开始，11代表12月

        // 更新组件数据
        this.startDate = this.formatDate(firstDay)
        this.endDate = this.formatDate(lastDay)
        this.timeRange = this.startDate + ' 至 ' + this.endDate
        this.sonData.startDate = this.startDate
        this.sonData.endDate = this.endDate
      }

    },
    // 辅助函数：格式化日期为 "YYYY-MM-DD"
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0') // 填充前导零
      const day = date.getDate().toString().padStart(2, '0') // 填充前导零
      return `${year}-${month}-${day}`
    },


  }
}