CODEWITHSUNDEEP
fluent-uifluentui-react
Ian
Ian

Reputation: 1

Fabric/Fluent UI Datepicker days of week are misaligned with calendar numerical date

Fabric/Fluent UI Datepicker calendar numerical dates are misaligned with the actual days of the week. Screenshot to demonstrate:

img_datePicker

^ as can be seen, the highlighted today date is marked September 17th, 2020, under the calendar's Friday column, but this is clearly wrong because September 17th, 2020 is a Thursday.

I have considered this might be due to an error in the actual Date() object, but that doesn't make sense because that should only cause the date to be wrong, the alignment of calendar numerical date to day of the week should never be misaligned like this, as that is simply wrong no matter what. September 17th, 2020 will always be a Thursday, and not a Friday, no matter what Date() object you input into the Datepicker.

Is this a bug with the Fabric/Fluent UI Datepicker? Is anyone else getting this behavior, or is there something I might have overlooked?

Many thanks in advance.

Upvotes: 0

Views: 1312

Answers (1)

Ian
Ian

Reputation: 1

SOLVED

The problem was that Fluent UI accepts the shortDay strings in a certain order:

shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S']

(see docs: https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker)

But because in my app I need to localize for different locales, I'm using Luxon to generate the day strings like so:

import { Info } from 'luxon';

shortDays: Info.weekdays('narrow', {locale: i18n.locale})

..and that outputs as

shortDays: ['M', 'T', 'W', 'T', 'F', 'S', 'S']

...which causes the strings to shift X_X (Fluent UI Datepicker reads 'M' as Sunday, 'T' as Monday, etc...)

Therefore, to solve it, I dropped this one line into my render method just before I return the HTML:

this.DayPickerStrings.shortDays.unshift(this.DayPickerStrings.shortDays.pop());

(yeah yeah I know, class components in React are outdated, but I didn't write this code originally, I'm just inheriting it)

Upvotes: 0

Related Questions