🐛 Day of week labels scrambled when using startOfWeek

[nikez]

Describe the bug
If you choose that the "startOfWeek" is, e.g. 1 for Monday, the day of the week labels get scrambled.

To Reproduce

1. Set startOfWeek="1"
2. Open datepicker
3. Look at day of the week labels

Expected behavior
I expect it to not be scrambled.

Screenshots

Desktop

• OS: Windows 11
• Browser: Firefox / Chrome
• Version 126.0.1 FF, unknown Chrome

Smartphone - Didn't test

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context

[jamesscottbrown]

The problem is that you are providing a string (startOfWeek="1") rather than a number (startOfWeek={1}).

The labels for the days are constructed by the expression dowLabels[(labelIndex + startOfWeek) % 7].

If startOfWeek is a string, then the + operator is interpreted as string concatenation rather than addition: labelIndex is converted to a string, with a 1 added to the end. This string is then cast back to a number when the modulus (%) is taken.

Adding a string to a number:

[0, 1, 2, 3, 4, 5, 6].map(i => (i+ "1")) 
["01",  "11", "21", "31", "41", "51", "61"]

[0,1,2,3,4,5,6].map(i => (i+ "1") % 7)
[ 1, 4, 0, 3, 6, 2, 5 ]

The library could be made more robust against misuse by using the parseNumber function (dowLabels[(labelIndex + parseNumber(startOfWeek, 10)) % 7]) or an extra + operator (dowLabels[(labelIndex + +startOfWeek) % 7] - note the space to distinguish from a ++ increment operator) to cast startOfWeek to a number.