封装第三方组件（八）封装年周的组件

年周，指的是一年内的第几周，不是周几的周。如图：

element-plus里面是有现成的组件可以实现这个功能，应该可以简单封装一下即可，但是。。。

我明明选的是第几周，但是给我的数据却是date类型的。为啥不直接给一个周的数据，比如202105或者2021w05。

如果后端需要的也是date类型，那么就好办了，但是如果后端需要202105这样的类型，是不是要转换一下呢？

好吧，也没啥大事转换呗。于是，开始了常规的，咳咳。

找了半天转换的，也没找到，后来盲猜format，“意外”的发现 dayjs(val).format('YYYYww')的方式可以得到年周的形式。只是没找到支持的间隔符合。

这下日期转周没啥问题了，然后是周转日期的问题。

因为既然后端需要202105这样的数据，那么后端给前端的也会是这样的数据，还需要给转成date的形式，这样 el-date-picker 才能够解析。

我没找到 el-date-picker 直接设置年周的方式，也没找到 dayjs 做年周转换的方法。所以只好自己动手了。

首先要解决一个问题——一年的第一周从哪开始算起。

查了一个资料，我国规定，第一个周四的周，算作第一周，简单的说：

• 一月一号是周一、周二、周三、周四的话，算作第一周；
• 一月一号是周五、周六、周日的，下一周算作第一周。

那么开写吧，一开始还想总结个公式出来，后来发现水平有限，只好穷举了。

  // 把 2021xx 的形式变成 date 类型
  const weekToDate = (week) => {
    if (week === '' || week === 0) {
      return new Date()
    }
    // 拆分week
    const year = week.substr(0, 4)
    const w = week.substr(week.length - 2, 2)
    console.log (year, w)

    // 计算一月一号是周几
    const dayOfWeek = new Date(year + '-01-01').getDay()
    // 计算第一周的第一天是几号。
    let firstDay = new Date(year + '-01-01')
    switch(dayOfWeek) {
      case 1: // 周一
        firstDay = new Date(year + '-01-01')
        break
      case 2:
        firstDay = new Date(parseInt(year - 1) + '-12-31')
        break
      case 3:
        firstDay = new Date(parseInt(year - 1) + '-12-30')
        break
      case 4:
        firstDay = new Date(parseInt(year - 1) + '-12-29')
        break
      case 5:
        firstDay = new Date(year + '-01-04')
        break
      case 6:
        // 下周一为今年第一周
        firstDay = new Date(year + '-01-03')
        break
      case 0: // 周日
        // 下周一为今年第一周
        firstDay = new Date(year + '-01-02')
        break
    }

    // 按照周数计算日期
    return dayjs(firstDay).add(7 * (w-1), 'day').toDate()
  } 

应该不是很严谨，暂时先凑合用。

为啥用dayjs呢？因为element用的就是dayjs，默认就给安装了，所以就直接用了。