问题
dayjs默认不配置本地化配置的时候,week()方法计算的周和国际化标准不一致。它将星期天定义为一周的开始,跨年周计算上,1月1日的一周是一年中的第一周。
而默认 element-ui
计算跨年周,以包含1月4日的周为第一周。默认以星期天为一周的开始,可以通过firstDayOfWeek
进行配置一周的开始。
这些不同将导致使用 el-datepicker type="week"
组件的时候,显示的周和实际值不一致
统一规则
<el-datepicker :value="2021-12-31" type="week" :firstDayOfWeek="1" /> // 页面显示 2021年第52周
// 方式一
import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
import weekOfYear from 'dayjs/plugin/weekOfYear'
dayjs.locale('zh-cn')
dayjs.extend(weekOfYear)
dayjs('2021-12-31').week() // 52
// 方式二
import dayjs from 'dayjs'
import isoWeek from 'dayjs/plugin/isoWeek'
dayjs.extend(isoWeek)
dayjs('2021-12-31').isoWeek() // 52
问题总结
关于周计算系统主要区别点:
- 一周的第一天是星期几
- 一年的第一周是的起点
Dayjs中关于周的函数
week
默认加载本地化配置为 dayjs.locale('en')
,其中默认配置中
weekStart: 0, // 设定一周的开始为周日
yearStart: 1, // 包含1月1日的一周是一年中的第一周。
本地化配置 dayjs.locale('zh-cn')
本地化设置后和 iosWeek()
规则一致。
weekStart: 1, // 设定一周的开始为星期一
yearStart: 4, // 包含1月4日的一周是一年中的第一周。(是第一个星期四的不同说法)
isoWeek
此方法严格遵循 ISO-8601
国际标准来计算周数。
- 每年有52周或者53周。
- 周一至周日为一个完整周。
- 每周的周一是该周的第1天。周日是该周的第7天 。
- 每年的第一周为当年1月4日所在的周。
- 周年,当前周所在的年份为周年。比如 2017年1月1日的周年为2016年。2016年1月1日,2016年1月2日,2016年1月3日的周年均为2015年。
原文链接:https://juejin.cn/post/7350876924392996902 作者:大明88