Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-31 15:08:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): format dates with the locale preference (#18259)

Browse Source 
fix: Format dates in settings according to user setting
This commit is contained in:
Sebastian Schneider 2025-05-16 18:03:54 +02:00 committed by GitHub
parent 28d8357cc5
commit 1219fd82a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View File

@ -18,6 +18,7 @@
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error'; import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification'; import { notificationController, NotificationType } from '../shared-components/notification/notification';
import { dateFormats } from '$lib/constants';
interface Props { interface Props {
keys: ApiKeyResponseDto[]; keys: ApiKeyResponseDto[];
@ -25,12 +26,6 @@
let { keys = $bindable() }: Props = $props(); let { keys = $bindable() }: Props = $props();
const format: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
};
async function refreshKeys() { async function refreshKeys() {
keys = await getApiKeys(); keys = await getApiKeys();
} }
@ -130,7 +125,7 @@
> >
<td class="w-1/3 text-ellipsis px-4 text-sm">{key.name}</td> <td class="w-1/3 text-ellipsis px-4 text-sm">{key.name}</td>
<td class="w-1/3 text-ellipsis px-4 text-sm" <td class="w-1/3 text-ellipsis px-4 text-sm"
>{new Date(key.createdAt).toLocaleDateString($locale, format)} >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
</td> </td>
<td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/3"> <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/3">
<CircleIconButton <CircleIconButton

10
web/src/lib/components/user-settings-page/user-purchase-settings.svelte
View File

@ -4,7 +4,9 @@
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte'; import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte'; import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { dateFormats } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte'; import { modalManager } from '$lib/managers/modal-manager.svelte';
import { locale } from '$lib/stores/preferences.store';
import { purchaseStore } from '$lib/stores/purchase.store'; import { purchaseStore } from '$lib/stores/purchase.store';
import { preferences, user } from '$lib/stores/user.store'; import { preferences, user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
@ -132,7 +134,9 @@
{#if $user.isAdmin && serverPurchaseInfo?.activatedAt} {#if $user.isAdmin && serverPurchaseInfo?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2"> <p class="dark:text-white text-sm mt-1 col-start-2">
{$t('purchase_activated_time', { {$t('purchase_activated_time', {
values: { date: new Date(serverPurchaseInfo.activatedAt) }, values: {
date: new Date(serverPurchaseInfo.activatedAt).toLocaleString($locale, dateFormats.settings),
},
})} })}
</p> </p>
{:else} {:else}
@ -161,7 +165,9 @@
{#if $user.license?.activatedAt} {#if $user.license?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2"> <p class="dark:text-white text-sm mt-1 col-start-2">
{$t('purchase_activated_time', { {$t('purchase_activated_time', {
values: { date: new Date($user.license?.activatedAt) }, values: {
date: new Date($user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
},
})} })}
</p> </p>
{/if} {/if}

5
web/src/lib/constants.ts
View File

@ -72,6 +72,11 @@ export const dateFormats = {
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
}, },
settings: <Intl.DateTimeFormatOptions>{
month: 'short',
day: 'numeric',
year: 'numeric',
},
}; };
export enum QueryParameter { export enum QueryParameter {