element-ui周选择器，如何获取年、周、起止日期？

说明

版本：vue2、element-ui@2.15.14
element-ui的日期选择器可以设为周，即type=week，官方示例如下：

如果你什么都不操作，那么获取的周的值为：

value1: Tue Aug 06 2024 00:00:00 GMT+0800 (中国标准时间)

如果给周选择器设置value-format，那么用weekValue值进行计算的时候，大概率会报错！
那么，怎能能同时获取所选周的年份、第几周、周的起止日期呢？

实现步骤

效果图：

代码：

 <el-date-picker
   v-model="weekValue"
   type="week"
   format="yyyy 第 WW 周"
   placeholder="选择周"
   :picker-options="weekOptions"
   style="width: 100%;"
   @change="changeWeek"
>
</el-date-picker>
export default {
  data() {
    return {
      weekValue: null,
	  weekOptions: {
        firstDayOfWeek: 1,
      }
	}
  }
  methods: {
	changeWeek(val) {
      const year = val.getFullYear();
      const firstDayOfYear = new Date(year, 0, 1);
      const pastDaysOfYear = Math.floor((val - firstDayOfYear) / (24 * 60 * 60 * 1000));
      const week = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay()) / 7);
      let startTime = new Date(val.getTime()); //开始时间
      let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间
      let timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];
      console.log('周的起止日期', timeArr)
      console.log('year', year)
      console.log('week', week)
    }
  }
}

简单解析

• 步骤一：给周的picker-options属性的firstDayOfWeek设置1，即默认周的第一天是周一，element-ui的默认值为7，即周日；这样你就能根据所选值计算出周的起止日期了，改变选择时周的val值就是周一，加+就是所选的周日了。
• 步骤二：计算年份：val.getFullYear()
• 步骤三：根据年份计算是第几周，最后自己赋值给响应的变量即可！

最后

小编是前端开发者，目前正在持续更新《若依nodejs全栈》系列，请大家多多关注。