[DatePicker] 年周的计算逻辑不按ISO国际标准

[xzj5426]

tdesign-vue 版本

1.0.5

重现链接

No response

重现步骤

datePicker和dateRangePicker在type='week'，类型为周选择器的时候，那个周数（也就是第几周），不是按照ISO国际标准来的，而是普通的按照每年的1号算作第一周来计算的。希望提供个属性，支持用户自行选择，是否按照ISO标准来计算年周数，谢谢

期望结果

希望提供个属性，支持用户自行选择，是否按照ISO标准来计算年周数

实际结果

只能按照每年的1号算作第一周来计算

框架版本

vue2.6

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @xzj5426，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[honkinglin]

这是一个好问题，其实 datepicker 组件底层使用的日期格式化库是dayjs，dayjs也有提供iso标准的周格式化插件，所以理论上只要有多少个格式化标准就会有多少种计算方式。
这里比较让我为难的是我不清楚是不是每个用户都期望使用iso的标准来计算周数，如果开个api做切换的话内部很多依赖 dayjs(value).week() 判断的都要调整一下，工作量有点大也感觉不是那么合理，但是其实你也可以自己用 dayjs 或者其他库转成 iso 标准的周数 dayjs(value).isoWeek() https://day.js.org/docs/en/get-set/iso-week。
或者你有没有看到其他组件库有处理过类似标准化比较好的方案也可以给我一些启发看怎么调整合适

[xzj5426]

这是一个好问题，其实 datepicker 组件底层使用的日期格式化库是dayjs，dayjs也有提供iso标准的周格式化插件，所以理论上只要有多少个格式化标准就会有多少种计算方式。 这里比较让我为难的是我不清楚是不是每个用户都期望使用iso的标准来计算周数，如果开个api做切换的话内部很多依赖 dayjs(value).week() 判断的都要调整一下，工作量有点大也感觉不是那么合理，但是其实你也可以自己用 dayjs 或者其他库转成 iso 标准的周数 dayjs(value).isoWeek() https://day.js.org/docs/en/get-set/iso-week。 或者你有没有看到其他组件库有处理过类似标准化比较好的方案也可以给我一些启发看怎么调整合适

我试过改源码转成iso标准的格式化，显示的年周数在以周一为firstDayOfWeek的时候显示是正确的，但是在firstDayOfWeek是7的时候，显示就不正确了。而且就是pannel上显示正确了，选择后，重新弹出pannel后，显示已选中的时间段却是错误的。

[xzj5426]

这是一个好问题，其实 datepicker 组件底层使用的日期格式化库是dayjs，dayjs也有提供iso标准的周格式化插件，所以理论上只要有多少个格式化标准就会有多少种计算方式。 这里比较让我为难的是我不清楚是不是每个用户都期望使用iso的标准来计算周数，如果开个api做切换的话内部很多依赖 dayjs(value).week() 判断的都要调整一下，工作量有点大也感觉不是那么合理，但是其实你也可以自己用 dayjs 或者其他库转成 iso 标准的周数 dayjs(value).isoWeek() https://day.js.org/docs/en/get-set/iso-week。 或者你有没有看到其他组件库有处理过类似标准化比较好的方案也可以给我一些启发看怎么调整合适

我试过改源码转成iso标准的格式化，显示的年周数在以周一为firstDayOfWeek的时候显示是正确的，但是在firstDayOfWeek是7的时候，显示就不正确了。而且就是pannel上显示正确了，选择后，重新弹出pannel后，显示已选中的时间段却是错误的。

或许可以参考arco.design，只不过他只支持vue3版本的

[honkinglin]

这是一个好问题，其实 datepicker 组件底层使用的日期格式化库是dayjs，dayjs也有提供iso标准的周格式化插件，所以理论上只要有多少个格式化标准就会有多少种计算方式。 这里比较让我为难的是我不清楚是不是每个用户都期望使用iso的标准来计算周数，如果开个api做切换的话内部很多依赖 dayjs(value).week() 判断的都要调整一下，工作量有点大也感觉不是那么合理，但是其实你也可以自己用 dayjs 或者其他库转成 iso 标准的周数 dayjs(value).isoWeek() https://day.js.org/docs/en/get-set/iso-week。 或者你有没有看到其他组件库有处理过类似标准化比较好的方案也可以给我一些启发看怎么调整合适

我试过改源码转成iso标准的格式化，显示的年周数在以周一为firstDayOfWeek的时候显示是正确的，但是在firstDayOfWeek是7的时候，显示就不正确了。而且就是pannel上显示正确了，选择后，重新弹出pannel后，显示已选中的时间段却是错误的。

或许可以参考arco.design，只不过他只支持vue3版本的

看了下arco的代码，他也没有使用 iso 标准来处理周数，不太清楚你现在遇到的困境是什么为什么一定要组件展示使用 iso 标准？
https://github.com/arco-design/arco-design/blob/main/components/_util/dayjs.ts#L4
https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/date.ts#L4

[xzj5426]

这是tdesign-vue的截图

[xzj5426]

这是arco的截图，上面显示的周数不一样，arco是iso标准来的

[honkinglin]

这是arco的截图，上面显示的周数不一样，arco是iso标准来的

arco 默认是周日开始展示日期的，这点会影响周数的计算，他的源码中没有使用 iso 相关的格式化函数，也是默认的周计算方式

https://stackblitz.com/edit/react-q3tf6x?file=src%2Fdemo.jsx

[honkinglin]

如果你期望得到跟 arco 一样的周展示效果可以更改 firstDayOfWeek={7}

[xzj5426]

注意看最左边的周数，2020年按照iso标准，是有53周的，可是在tdesign-vue中不存在53周，这周变成了2021年的第一周

[honkinglin]

注意看最左边的周数，2020年按照iso标准，是有53周的，可是在tdesign-vue中不存在53周，这周变成了2021年的第一周

ok，这里看起来确实有问题，2020年还有几天没过完是应该要展示53周的，我排查下

[github-actions]

♥️ 有劳 @zhwachen @xiaosansiji @HQ-Lin 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @xzj5426 。

[honkinglin]

很有意思的一个问题，arco 也并不是用的 iso 标准，但是他们设置了地区所以展示正确了，这周版本会修复下这个问题
这里有相关 issue 可以看看： iamkun/dayjs#1264