Feature Request: Date (Range) Pickers | Add option to show Calendar Weeks

[sawin-dennis]

In our B2B context, customers and contractors are often communication to each other mentioning calendar weeks. Therefore it would make a lot of sense to show them right in the picker, just like on e. g. https://uxsolutions.github.io/bootstrap-datepicker/

Watch out that there are different numbering systems for calendar weeks (see https://en.wikipedia.org/wiki/Week#Numbering). We'd need the European ISO 8601 that also assumed Monday as the first day of the week

[linear[bot]]

SUI-338 Date (Range) Pickers | Add option to show Calendar Weeks

[Pagebakers]

Weeknumbers aren't built into React Aria or @internationalized/date not sure yet what is the best approach to add this feature.

[sawin-dennis]

Yeah, a bit disappointing tbh that they don't have that. I guess with just walking through every Monday of a year with https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html#weeks-in-month it's possible to get but annoying...

Otherwise, found this information for example

• How to calculate ISO CW in JS
  • https://weeknumber.com/how-to/javascript or
  • https://www.epochconverter.com/weeknumbers or
  • https://stackoverflow.com/a/16591175
• Related issue in other library react-datepicker
  • https://github.com/Hacker0x01/react-datepicker/pull/934 and
  • https://github.com/Hacker0x01/react-datepicker/issues/2675
• Solution of library rsuite
  • https://rsuitejs.com/components/date-picker/#iso-week
• date libraries supporting ISO week numbers (as far as I understand)
  • https://github.com/commenthol/weeknumber
  • https://date-fns.org/v3.2.0/docs/getWeek
  • https://moment.github.io/luxon/#/calendars?id=fully-supported-calendars
  • (moment.js as well but that's essentially deprecated afaik)