fix(web): use locale-aware date formatting for contribution calendar tooltips (#38398) (#38401)

Backport #38398 by @SudhanshuMatrix

The contribution calendar manually constructed localized date strings
instead of using the browser's locale-aware date formatting. Replace
this with `toLocaleDateString()` to correctly format dates for all
locales and calendar systems, including non-Gregorian calendars.

Fixes https://github.com/go-gitea/gitea/issues/38375
---

### Before and After Comparison (Persian `fa-IR`)

Before (Buggy) 
 
<img width="1246" height="651" alt="image"
src="https://github.com/user-attachments/assets/670698e6-dd4a-4c7e-b7fb-23849090d1b9"
/>
 
After (Fixed) 
<img width="1246" height="651" alt="image"
src="https://github.com/user-attachments/assets/9b65c647-876e-475b-98d1-614ef316fd6f"
/>

Co-authored-by: Shudhanshu Singh <sudhanshuwriterblc@gmail.com>
This commit is contained in:
Giteabot
2026-07-10 14:28:54 -07:00
committed by GitHub
parent 74ad781db9
commit b6aa2b61c6

View File

@@ -2,6 +2,7 @@
import {computed, onBeforeUnmount, onMounted} from 'vue';
import tippy, {createSingleton} from 'tippy.js';
import type {CreateSingletonInstance, Instance} from 'tippy.js';
import {getCurrentLocale} from '../utils.ts';
type HeatmapValue = {date: Date; count: number};
type HeatmapCell = {date: Date; colorIndex: number; ariaLabel: string; tooltip: string};
@@ -61,8 +62,9 @@ const grid = computed(() => {
activities.set(dateKey(date), {count, colorIndex});
}
const {months, on} = props.locale.heatMapLocale;
const {on} = props.locale.heatMapLocale;
const {noDataText, tooltipUnit} = props.locale;
const currentLocale = getCurrentLocale();
const cursorStart = shiftDate(start, -padStart);
const cursor = new Date(cursorStart.getFullYear(), cursorStart.getMonth(), cursorStart.getDate());
@@ -71,7 +73,7 @@ const grid = computed(() => {
const week: HeatmapCell[] = [];
for (let d = 0; d < daysInWeek; d++) {
const hit = activities.get(dateKey(cursor));
const dateStr = `${months[cursor.getMonth()]} ${cursor.getDate()}, ${cursor.getFullYear()}`;
const dateStr = cursor.toLocaleDateString(currentLocale, {year: 'numeric', month: 'short', day: 'numeric'});
const head = hit ? `${hit.count} ${tooltipUnit}` : noDataText;
week.push({
date: new Date(cursor),