Блог

Ткань / Fluent UI Datepicker календарные числовые даты не совпадают с фактическими днями недели. Скриншот для демонстрации:

^ как видно, выделенная сегодняшняя дата отмечена 17 сентября 2020 года в столбце пятница календаря, но это явно неправильно, потому что 17 сентября 2020 года — четверг.

Я подумал, что это может быть связано с ошибкой в фактическом Date() объекте, но это не имеет смысла, потому что это должно привести только к неправильной дате, выравнивание числовой даты календаря с днем недели никогда не должно быть смещено подобным образом, поскольку это просто неправильно, несмотря ни на что. 17 сентября 2020 года всегда будет четверг, а не пятница, независимо от того, какой Date() объект вы вводите в Datepicker.

Это ошибка с Fabric / Fluent UI Datepicker? Кто-нибудь еще ведет себя подобным образом, или есть что-то, что я, возможно, упустил из виду?

Заранее большое спасибо.

РЕШАЕМАЯ

Проблема заключалась в том, что Fluent UI принимает строки коротких дней в определенном порядке:

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

(см. Документы:https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker )

Но поскольку в моем приложении мне нужно локализовать для разных локалей, я использую Luxon для генерации строк дня следующим образом:

import { Info } from 'luxon';

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

..и это выдает как

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

…что приводит к сдвигу строк на X_X (Fluent UI Datepicker читает ‘M’ как воскресенье, ‘T’ как понедельник и т.д. )

Поэтому, чтобы решить эту проблему, я поместил эту строку в свой метод рендеринга непосредственно перед возвратом HTML:

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

(да, да, я знаю, компоненты класса в React устарели, но я не писал этот код изначально, я просто наследую его)