Skip to content

Commit df05872

Browse files
ValeraSValeraS
committed
fix(Calendar): always render dates with current locale
1 parent b97fc99 commit df05872

File tree

5 files changed

+45
-22
lines changed

5 files changed

+45
-22
lines changed

‎src/components/CalendarView/CalendarView.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {ArrowToggle, Button} from '@gravity-ui/uikit';
88

99
import {block} from '../../utils/cn';
1010
import type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';
11+
import {formatDateTime} from '../utils/dates';
1112

1213
import type {RangeCalendarState} from './hooks/types';
1314
import {useCalendarCellProps} from './hooks/useCalendarCellProps';
@@ -165,9 +166,9 @@ function Weekdays({state}: WeekdaysProps) {
165166
key={date.day()}
166167
className={b('weekday', {weekend: state.isWeekend(date)})}
167168
role="columnheader"
168-
aria-label={date.format('dddd')}
169+
aria-label={formatDateTime(date, 'dddd', state.timeZone)}
169170
>
170-
{date.format('dd')}
171+
{formatDateTime(date, 'dd', state.timeZone)}
171172
</div>
172173
);
173174
})}
@@ -188,7 +189,7 @@ function CalendarGridCells({state}: CalendarGridProps) {
188189
<div key={rowIndex} className={b('grid-row')} role="row">
189190
{state.mode === 'quarters' ? (
190191
<span role="rowheader" className={b('grid-rowgroup-header')}>
191-
{days[rowIndex * columnsInRow].format('YYYY')}
192+
{formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone)}
192193
</span>
193194
) : null}
194195
{days

‎src/components/CalendarView/hooks/useCalendarCellProps.ts

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from 'react';
22

33
import type {DateTime} from '@gravity-ui/date-utils';
44

5-
import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
5+
import {formatDateTime} from '../../utils/dates';
6+
7+
import type {CalendarState, RangeCalendarState} from './types';
68

79
export function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState) {
810
const ref = React.useRef<HTMLDivElement>(null);
@@ -30,7 +32,7 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
3032
const isCurrent = state.isCurrent(date);
3133
const isWeekend = state.isWeekend(date);
3234

33-
const label = getDateLabel(date, state.mode);
35+
const label = getDateLabel(date, state);
3436

3537
const cellProps: React.HTMLAttributes<unknown> = {
3638
role: 'gridcell',
@@ -64,13 +66,13 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
6466
},
6567
};
6668

67-
let formattedDate = date.format('D');
69+
let formattedDate = formatDateTime(date, 'D', state.timeZone);
6870
if (state.mode === 'months') {
69-
formattedDate = date.format('MMM');
71+
formattedDate = formatDateTime(date, 'MMM', state.timeZone);
7072
} else if (state.mode === 'quarters') {
71-
formattedDate = date.format('[Q]Q');
73+
formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
7274
} else if (state.mode === 'years') {
73-
formattedDate = date.format('YYYY');
75+
formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
7476
}
7577

7678
return {
@@ -89,16 +91,21 @@ export function useCalendarCellProps(date: DateTime, state: CalendarState | Rang
8991
};
9092
}
9193

92-
function getDateLabel(date: DateTime, mode: CalendarLayout) {
93-
let label = '';
94-
if (mode === 'days') {
95-
label = `${date.format('dddd')}, ${date.format('LL')}`;
96-
} else if (mode === 'months') {
97-
label = `${date.format('MMMM YYYY')}`;
98-
} else if (mode === 'quarters') {
99-
label = `${date.format('[Q]Q YYYY')}`;
100-
} else if (mode === 'years') {
101-
label = `${date.format('YYYY')}`;
94+
function getDateLabel(date: DateTime, state: CalendarState | RangeCalendarState) {
95+
switch (state.mode) {
96+
case 'days': {
97+
return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
98+
}
99+
case 'months': {
100+
return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
101+
}
102+
case 'quarters': {
103+
return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
104+
}
105+
case 'years': {
106+
return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
107+
}
108+
default:
109+
return '';
102110
}
103-
return label;
104111
}

‎src/components/CalendarView/hooks/useCalendarGridProps.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {useFocusWithin} from '@gravity-ui/uikit';
22

3+
import {formatDateTime} from '../../utils/dates';
4+
35
import type {CalendarState, RangeCalendarState} from './types';
46

57
export function useCalendarGridProps(state: CalendarState | RangeCalendarState) {
@@ -14,7 +16,11 @@ export function useCalendarGridProps(state: CalendarState | RangeCalendarState)
1416
'aria-label':
1517
state.mode === 'years' || state.mode === 'quarters'
1618
? `${state.startDate.year()} — ${state.endDate.year()}`
17-
: state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'),
19+
: formatDateTime(
20+
state.focusedDate,
21+
state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',
22+
state.timeZone,
23+
),
1824
'aria-disabled': state.disabled ? 'true' : undefined,
1925
'aria-readonly': state.readOnly ? 'true' : undefined,
2026
...focusWithinProps,

‎src/components/CalendarView/hooks/useCalendarProps.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {useFocusWithin} from '@gravity-ui/uikit';
44
import type {ButtonProps} from '@gravity-ui/uikit';
55

66
import type {CalendarProps} from '../../Calendar/Calendar';
7+
import {formatDateTime} from '../../utils/dates';
78
import {i18n} from '../i18n';
89

910
import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
@@ -15,7 +16,11 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra
1516
const title =
1617
state.mode === 'years' || state.mode === 'quarters'
1718
? `${state.startDate.year()} — ${state.endDate.year()}`
18-
: state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
19+
: formatDateTime(
20+
state.focusedDate,
21+
state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',
22+
state.timeZone,
23+
);
1924

2025
const {focusWithinProps} = useFocusWithin({
2126
onFocusWithin: props.onFocus,

‎src/components/utils/dates.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,7 @@ export function mergeDateTime(date: DateTime, time: DateTime) {
5555
.set('minutes', time.minute())
5656
.set('seconds', time.second());
5757
}
58+
59+
export function formatDateTime(date: DateTime, format: string, timezone: string) {
60+
return dateTime({input: date, timeZone: timezone}).format(format);
61+
}

0 commit comments

Comments
 (0)