Skip to content

fix: respect locale date order for Asian languages in DatePresenter #10779 #10781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Learnobug wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

fix: respect locale date order for Asian languages in DatePresenter #10779 #10781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f293a8
fix: respect locale date order for Asian languages in DatePresenter
Learnobug Apr 18, 2026
39fc87e
fix: apply formatting fixes
Learnobug Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/ui/src/components/calendar/DatePresenter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down
14 changes: 3 additions & 11 deletions packages/ui/src/components/calendar/DateRangePresenter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
44 changes: 26 additions & 18 deletions packages/ui/src/components/calendar/internal/DateUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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<number, string> {
export function getWeekDayNames(): Map<number, string> {
const today: Date = new Date()
const offset: number = 0 - today.getDay()
const startDate: number = today.setTime(today.getTime() + MILLISECONDS_IN_DAY * offset)
Expand All @@ -59,15 +59,15 @@ export function getWeekDayNames (): Map<number, string> {
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
}
Expand All @@ -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)
Expand All @@ -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}`
}
Expand Down Expand Up @@ -155,10 +155,18 @@ 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 {
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 => {
Expand All @@ -177,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 {
Expand Down
Loading