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

分析

版本：vue2、[email protected]
element-ui的日期选择器可以设为周，即type=week，官方示比方下：

假如你什么都不使用，那么获取的周的值为：

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

复制代码

假如给周选择器设置value-format，那么用weekValue值举行盘算的时间，大概率会报错！
那么，怎能能同时获取所选周的年份、第几周、周的起止日期呢？
实现步调

结果图：

代码：

1. <el-date-picker
2.    v-model="weekValue"
3.    type="week"
4.    format="yyyy 第 WW 周"
5.    placeholder="选择周"
6.    :picker-options="weekOptions"
7.    style="width: 100%;"
8.    @change="changeWeek"
9. >
10. </el-date-picker>
11. export default {
12.   data() {
13.     return {
14.       weekValue: null,
15.           weekOptions: {
16.         firstDayOfWeek: 1,
17.       }
18.         }
19.   }
20.   methods: {
21.         changeWeek(val) {
22.       const year = val.getFullYear();
23.       const firstDayOfYear = new Date(year, 0, 1);
24.       const pastDaysOfYear = Math.floor((val - firstDayOfYear) / (24 * 60 * 60 * 1000));
25.       const week = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay()) / 7);
26.       let startTime = new Date(val.getTime()); //开始时间
27.       let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间
28.       let timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];
29.       console.log('周的起止日期', timeArr)
30.       console.log('year', year)
31.       console.log('week', week)
32.     }
33.   }
34. }

复制代码

简朴分析

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

末了

小编是前端开发者，现在正在连续更新《若依nodejs全栈》系列，请各人多多关注。