fix(Calendar): always render dates with current locale

Author: ValeraS

src/components/CalendarView/CalendarView.tsx

@@ -8,6 +8,7 @@ import {ArrowToggle, Button} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';
+import {formatDateTime} from '../utils/dates';
 
 import type {RangeCalendarState} from './hooks/types';
 import {useCalendarCellProps} from './hooks/useCalendarCellProps';
@@ -165,9 +166,9 @@ function Weekdays({state}: WeekdaysProps) {
                         key={date.day()}
                         className={b('weekday', {weekend: state.isWeekend(date)})}
                         role="columnheader"
-                        aria-label={date.format('dddd')}
+                        aria-label={formatDateTime(date, 'dddd', state.timeZone)}
                     >
-                        {date.format('dd')}
+                        {formatDateTime(date, 'dd', state.timeZone)}
                     </div>
                 );
             })}
@@ -188,7 +189,7 @@ function CalendarGridCells({state}: CalendarGridProps) {
                 <div key={rowIndex} className={b('grid-row')} role="row">
                     {state.mode === 'quarters' ? (
                         <span role="rowheader" className={b('grid-rowgroup-header')}>
-                            {days[rowIndex * columnsInRow].format('YYYY')}
+                            {formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone)}
                         </span>
                     ) : null}
                     {days

src/components/CalendarView/hooks/useCalendarCellProps.ts

@@ -2,7 +2,9 @@ import React from 'react';
 
 import type {DateTime} from '@gravity-ui/date-utils';
 
-import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
+import {formatDateTime} from '../../utils/dates';
+
+import type {CalendarState, RangeCalendarState} from './types';
 
 export function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState) {
     const ref = React.useRef<HTMLDivElement>(null);
@@ -30,7 +32,7 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
 
-    const label = getDateLabel(date, state.mode);
+    const label = getDateLabel(date, state);
 
     const cellProps: React.HTMLAttributes<unknown> = {
         role: 'gridcell',
@@ -64,13 +66,13 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
         },
     };
 
-    let formattedDate = date.format('D');
+    let formattedDate = formatDateTime(date, 'D', state.timeZone);
     if (state.mode === 'months') {
-        formattedDate = date.format('MMM');
+        formattedDate = formatDateTime(date, 'MMM', state.timeZone);
     } else if (state.mode === 'quarters') {
-        formattedDate = date.format('[Q]Q');
+        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
     } else if (state.mode === 'years') {
-        formattedDate = date.format('YYYY');
+        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
     }
 
     return {
@@ -89,16 +91,21 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
     };
 }
 
-function getDateLabel(date: DateTime, mode: CalendarLayout) {
-    let label = '';
-    if (mode === 'days') {
-        label = `${date.format('dddd')}, ${date.format('LL')}`;
-    } else if (mode === 'months') {
-        label = `${date.format('MMMM YYYY')}`;
-    } else if (mode === 'quarters') {
-        label = `${date.format('[Q]Q YYYY')}`;
-    } else if (mode === 'years') {
-        label = `${date.format('YYYY')}`;
+function getDateLabel(date: DateTime, state: CalendarState | RangeCalendarState) {
+    switch (state.mode) {
+        case 'days': {
+            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
+        }
+        case 'months': {
+            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
+        }
+        case 'quarters': {
+            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
+        }
+        case 'years': {
+            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
+        }
+        default:
+            return '';
     }
-    return label;
 }

src/components/CalendarView/hooks/useCalendarGridProps.ts

@@ -1,5 +1,7 @@
 import {useFocusWithin} from '@gravity-ui/uikit';
 
+import {formatDateTime} from '../../utils/dates';
+
 import type {CalendarState, RangeCalendarState} from './types';
 
 export function useCalendarGridProps(state: CalendarState | RangeCalendarState) {
@@ -14,7 +16,11 @@ export function useCalendarGridProps(state: CalendarState | RangeCalendarState)
         'aria-label':
             state.mode === 'years' || state.mode === 'quarters'
                 ? `${state.startDate.year()} — ${state.endDate.year()}`
-                : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'),
+                : formatDateTime(
+                      state.focusedDate,
+                      state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',
+                      state.timeZone,
+                  ),
         'aria-disabled': state.disabled ? 'true' : undefined,
         'aria-readonly': state.readOnly ? 'true' : undefined,
         ...focusWithinProps,

src/components/CalendarView/hooks/useCalendarProps.ts

@@ -4,6 +4,7 @@ import {useFocusWithin} from '@gravity-ui/uikit';
 import type {ButtonProps} from '@gravity-ui/uikit';
 
 import type {CalendarProps} from '../../Calendar/Calendar';
+import {formatDateTime} from '../../utils/dates';
 import {i18n} from '../i18n';
 
 import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
@@ -15,7 +16,11 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra
     const title =
         state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
+            : formatDateTime(
+                  state.focusedDate,
+                  state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',
+                  state.timeZone,
+              );
 
     const {focusWithinProps} = useFocusWithin({
         onFocusWithin: props.onFocus,

src/components/utils/dates.ts

@@ -51,3 +51,7 @@ export function mergeDateTime(date: DateTime, time: DateTime) {
         .set('minutes', time.minute())
         .set('seconds', time.second());
 }
+
+export function formatDateTime(date: DateTime, format: string, timezone: string) {
+    return dateTime({input: date, timeZone: timezone}).format(format);
+}