From 5f293a8ec8dad8d922632201fd6766415308e9a6 Mon Sep 17 00:00:00 2001 From: Learnobug Date: Sat, 18 Apr 2026 18:30:28 +0530 Subject: [PATCH 1/2] fix: respect locale date order for Asian languages in DatePresenter Signed-off-by: Learnobug --- .../src/components/calendar/DatePresenter.svelte | 8 ++------ .../components/calendar/DateRangePresenter.svelte | 14 +++----------- .../src/components/calendar/internal/DateUtils.ts | 8 ++++++++ 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte index ff8c4a00f4b..8ea0ee30b92 100644 --- a/packages/ui/src/components/calendar/DatePresenter.svelte +++ b/packages/ui/src/components/calendar/DatePresenter.svelte @@ -25,7 +25,7 @@ import DatePopup from './DatePopup.svelte' import DPCalendar from './icons/DPCalendar.svelte' import DPCalendarOver from './icons/DPCalendarOver.svelte' - import { getMonthName } from './internal/DateUtils' + import { formatDate } from './internal/DateUtils' import { registerFocus } from '../../focus' export let value: number | null | undefined @@ -127,11 +127,7 @@ {#if value !== null && value !== undefined} {#if shouldShowLabel} {#if mode !== DateRangeMode.TIMEONLY} - {new Date(value).getDate()} - {getMonthName(new Date(value), 'short')} - {#if new Date(value).getFullYear() !== today.getFullYear()} - {new Date(value).getFullYear()} - {/if} + {formatDate(new Date(value), new Date(value).getFullYear() !== today.getFullYear())} {/if} {#if withTime} {#if mode !== DateRangeMode.TIMEONLY} diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index 3a398063710..c9b056674cf 100644 --- a/packages/ui/src/components/calendar/DateRangePresenter.svelte +++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte @@ -24,7 +24,7 @@ import DatePopup from './DatePopup.svelte' import DPCalendar from './icons/DPCalendar.svelte' import DPCalendarOver from './icons/DPCalendarOver.svelte' - import { daysInMonth, getMonthName } from './internal/DateUtils' + import { daysInMonth, formatDate } from './internal/DateUtils' export let value: number | null | undefined = null export let mode: DateRangeMode = DateRangeMode.DATE @@ -312,11 +312,7 @@ {/if} {#if value !== undefined && value !== null && value.toString() !== ''} {#if withDate} - {new Date(value).getDate()} - {getMonthName(new Date(value), 'short')} - {#if new Date(value).getFullYear() !== today.getFullYear()} - {new Date(value).getFullYear()} - {/if} + {formatDate(new Date(value), new Date(value).getFullYear() !== today.getFullYear())} {/if} {#if withTime} {#if withDate} @@ -487,11 +483,7 @@ {/if} {#if value !== undefined && value !== null && value.toString() !== ''} {#if withDate} - {new Date(value).getDate()} - {getMonthName(new Date(value), 'short')} - {#if new Date(value).getFullYear() !== today.getFullYear()} - {new Date(value).getFullYear()} - {/if} + {formatDate(new Date(value), new Date(value).getFullYear() !== today.getFullYear())} {/if} {#if withTime} {#if withDate} diff --git a/packages/ui/src/components/calendar/internal/DateUtils.ts b/packages/ui/src/components/calendar/internal/DateUtils.ts index fa1bc87023a..915c544abfb 100644 --- a/packages/ui/src/components/calendar/internal/DateUtils.ts +++ b/packages/ui/src/components/calendar/internal/DateUtils.ts @@ -159,6 +159,14 @@ export function getFormattedDate (value: number | null, options?: Intl.DateTimeF return value === null ? '' : new Date(value).toLocaleString('default', options ?? { month: 'short', day: 'numeric' }) } +export function formatDate (date: Date, showYear: boolean): string { + const locale = new Intl.NumberFormat().resolvedOptions().locale + const options: Intl.DateTimeFormatOptions = showYear + ? { year: 'numeric', month: 'short', day: 'numeric' } + : { month: 'short', day: 'numeric' } + return new Intl.DateTimeFormat(locale, options).format(date) +} + export const getTimeZoneName = ( val: string = Intl.DateTimeFormat().resolvedOptions().timeZoneName ?? Intl.DateTimeFormat().resolvedOptions().timeZone ): string => { From 39fc87ec184118916336fdb21f935f42731cef0a Mon Sep 17 00:00:00 2001 From: Learnobug Date: Tue, 21 Apr 2026 18:53:05 +0530 Subject: [PATCH 2/2] fix: apply formatting fixes Signed-off-by: Learnobug --- .../components/calendar/internal/DateUtils.ts | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/calendar/internal/DateUtils.ts b/packages/ui/src/components/calendar/internal/DateUtils.ts index 915c544abfb..36ec971a65c 100644 --- a/packages/ui/src/components/calendar/internal/DateUtils.ts +++ b/packages/ui/src/components/calendar/internal/DateUtils.ts @@ -20,7 +20,7 @@ export const MILLISECONDS_IN_MINUTE = 60000 export const MILLISECONDS_IN_DAY = 86400000 export const MILLISECONDS_IN_WEEK = DAYS_IN_WEEK * MILLISECONDS_IN_DAY -export function firstDay (date: Date, firstDay: number = 1): Date { +export function firstDay(date: Date, firstDay: number = 1): Date { const firstDayOfMonth = new Date(new Date(date).setHours(0, 0, 0, 0)) firstDayOfMonth.setDate(1) // First day of month const result = new Date(firstDayOfMonth) @@ -32,23 +32,23 @@ export function firstDay (date: Date, firstDay: number = 1): Date { return result } -export function getWeek (date: Date): number { +export function getWeek(date: Date): number { const onejan = new Date(date.getFullYear(), 0, 1) return Math.ceil(((date.getTime() - onejan.getTime()) / MILLISECONDS_IN_DAY + onejan.getDay() + 1) / DAYS_IN_WEEK) } -export function daysInMonth (date: Date): number { +export function daysInMonth(date: Date): number { return 33 - new Date(date.getFullYear(), date.getMonth(), 33).getDate() } -export function getWeekDayName (weekDay: Date, weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'): string { +export function getWeekDayName(weekDay: Date, weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'): string { const locale = new Intl.NumberFormat().resolvedOptions().locale return new Intl.DateTimeFormat(locale, { weekday: weekFormat }).format(weekDay) } -export function getWeekDayNames (): Map { +export function getWeekDayNames(): Map { const today: Date = new Date() const offset: number = 0 - today.getDay() const startDate: number = today.setTime(today.getTime() + MILLISECONDS_IN_DAY * offset) @@ -59,15 +59,15 @@ export function getWeekDayNames (): Map { return result } -export function day (firstDay: Date, offset: number): Date { +export function day(firstDay: Date, offset: number): Date { return new Date(new Date(firstDay).setDate(firstDay.getDate() + offset)) } -export function weekday (firstDay: Date, w: number, d: number): Date { +export function weekday(firstDay: Date, w: number, d: number): Date { return day(firstDay, w * DAYS_IN_WEEK + d) } -export function areDatesEqual (firstDate: Date | undefined, secondDate: Date | undefined): boolean { +export function areDatesEqual(firstDate: Date | undefined, secondDate: Date | undefined): boolean { if (firstDate === undefined || secondDate === undefined) { return false } @@ -78,19 +78,19 @@ export function areDatesEqual (firstDate: Date | undefined, secondDate: Date | u ) } -export function fromCurrentToTz (date: Date | number, tz: string): Date { +export function fromCurrentToTz(date: Date | number, tz: string): Date { return utcToZonedTime(zonedTimeToUtc(date, getUserTimezone()), tz) } -export function fromTzToCurrent (date: Date | number, tz: string): Date { +export function fromTzToCurrent(date: Date | number, tz: string): Date { return utcToZonedTime(zonedTimeToUtc(date, tz), getUserTimezone()) } -export function isWeekend (date: Date): boolean { +export function isWeekend(date: Date): boolean { return date.getDay() === 0 || date.getDay() === 6 } -export function getMonthName (date: Date, option: 'narrow' | 'short' | 'long' | 'numeric' | '2-digit' = 'long'): string { +export function getMonthName(date: Date, option: 'narrow' | 'short' | 'long' | 'numeric' | '2-digit' = 'long'): string { try { const locale = new Intl.NumberFormat().resolvedOptions().locale return new Intl.DateTimeFormat(locale, { month: option }).format(date) @@ -106,24 +106,24 @@ export interface ICell { classes: TCellStyle } -export function getLocalWeekStart (): number { +export function getLocalWeekStart(): number { const locale = new Intl.Locale(navigator.language) return typeof (locale as any)?.getWeekInfo === 'function' ? (locale as any)?.getWeekInfo()?.firstDay : ((locale as any).weekInfo?.firstDay ?? 1) } -export function hasLocalWeekStart (): boolean { +export function hasLocalWeekStart(): boolean { const locale = new Intl.Locale(navigator.language) return typeof (locale as any)?.getWeekInfo === 'function' || (locale as any).weekInfo?.firstDay !== undefined } -export function getWeekStart (date: Date = new Date(), firstDay: number = 1): Date { +export function getWeekStart(date: Date = new Date(), firstDay: number = 1): Date { date = new Date(new Date(date).setHours(0, 0, 0, 0)) return new Date(date.setDate(date.getDate() - ((date.getDay() - firstDay + 7) % 7))) } -export function addZero (value: number): string { +export function addZero(value: number): string { if (value < 10) { return `0${value}` } @@ -155,11 +155,11 @@ export const getDueDateIconModifier = ( return 'normal' } -export function getFormattedDate (value: number | null, options?: Intl.DateTimeFormatOptions): string { +export function getFormattedDate(value: number | null, options?: Intl.DateTimeFormatOptions): string { return value === null ? '' : new Date(value).toLocaleString('default', options ?? { month: 'short', day: 'numeric' }) } -export function formatDate (date: Date, showYear: boolean): string { +export function formatDate(date: Date, showYear: boolean): string { const locale = new Intl.NumberFormat().resolvedOptions().locale const options: Intl.DateTimeFormatOptions = showYear ? { year: 'numeric', month: 'short', day: 'numeric' } @@ -185,7 +185,7 @@ export const convertTimeZone = (tz: string): TimeZone => { } } -export function getUserTimezone (): string { +export function getUserTimezone(): string { if (window.Intl !== undefined) { return Intl.DateTimeFormat().resolvedOptions().timeZone } else {