最近有个功能，需要拿到日期和年份、周别，我选用了elementplus的 el-date-picker 组件，使用过程中踩坑了，这里记录下

官方文档

通过在官网实验，发现只显示第几周，我要的是××××年第×周这样的效果，这个满足不了我的需求，所以需要改造下

踩坑之路

话不多说，看核心代码

<el-form-item label="周：" prop="exactDate">
  <el-date-picker v-model="ruleForm.exactDate" type="week" format=" YYYY 年第 w 周 " value-format="YYYY-MM-DD"
	placeholder="选择周">
  </el-date-picker>
</el-form-item>

  //保存数据
     const handleSaveData = () => {
      const dateStr = ruleForm.exactDate.split('-')
      const data = {
        id: state.handleId,
        year: dateStr[0],
        week: getWeek(dateStr),
        productId: ruleForm.productId,
        code: ruleForm.code,
        name: ruleForm.name,
        unit: ruleForm.unit,
        specification: ruleForm.specification,
        quantityDemanded: ruleForm.quantityDemanded,
        exactDate: ruleForm.exactDate
      }
      update(data).then(res => {
        getTableData()
        ElMessage.success('恭喜您，保存成功！')
      })
    }
    
    //根据日期获取第几周
    function getWeek(dateTime) {
      let a = dateTime[0]
      let b = dateTime[1]
      let c = dateTime[2]
      var date1 = new Date(a, parseInt(b) - 1, c),  //当前日期  
        date2 = new Date(a, 0, 1),  //当年第一天  
        // d是当前日期是今年第多少天  
        d = Math.round((date1.valueOf() - date2.valueOf()) / (24*60*60*1000));
      // d + 当前年的第一天的周差距的和在除以7就是本年第几周  
      let week = Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
      return week
    }

看效果 发现正常选择没问题，但是当我跨年选择，选2025年一月第一周的时候，月份变了年份还是2024，这不扯呢吗 那我把组件的类型改成日期试 试type="date"

        <el-date-picker v-model="ruleForm.exactDate" type="date" format=" YYYY 年第 w 周 " value-format="YYYY-MM-DD"
                placeholder="选择周">
              </el-date-picker>

发现2025年第一周可以，在2024年那一页选2024年12月31日怎么还是显示2024年第一周，应该是2025年第一周才对呀（这个可能是组件算法的问题，有兴趣的可以去自行研究），而且保存显示的是2024年第53周，一年才52周，你给我出来53周就离谱了，再接着改吧。

解决方案

既然可能组件显示××××年第×周有问题，那我就退而求其次把年去掉算了，只要数据对，table正常显示就行了， 这里年份在取周次的时候进行了一下处理，代码如下

    <el-form-item label="周：" prop="exactDate">
              <el-date-picker v-model="ruleForm.exactDate" type="date" format=" 第 w 周 " value-format="YYYY-MM-DD"
                placeholder="选择周" >
              </el-date-picker>
	 </el-form-item>
	
	//保存数据
    const handleSaveData = () => {
      const dateStr = ruleForm.exactDate.split('-')
      const data = {
        id: state.handleId,
        week: getWeek(dateStr),
        year: ruleForm.year,
        productId: ruleForm.productId,
        code: ruleForm.code,
        name: ruleForm.name,
        unit: ruleForm.unit,
        specification: ruleForm.specification,
        quantityDemanded: ruleForm.quantityDemanded,
        exactDate: ruleForm.exactDate
      }
      update(data).then(res => {
        getTableData()
        ElMessage.success('恭喜您，保存成功！')
      })
    }
    // 根据日期获取第几周
    function getWeek(dateTime) {
      let a = dateTime[0]
      let b = dateTime[1]
      let c = dateTime[2]
      var date1 = new Date(a, parseInt(b) - 1, c),  //当前日期  
        date2 = new Date(a, 0, 1),  //当年第一天  
        // d是当前日期是今年第多少天  
        d = Math.round((date1.valueOf() - date2.valueOf()) / (24*60*60*1000));
      // d + 当前年的第一天的周差距的和在除以7就是本年第几周  
      let week = Math.ceil((d + date2.getDay()) / 7);
      //一年只有52周，当出现53的时候一定是跨年的情况出现了，需要年份加1，周为第一周
      if (week == 53) {
        week = 1
        ruleForm.year = parseInt(a)+1
      }else{
        ruleForm.year = a
      }
      return week
    }