Хелперы для работы с датами + polyfill для свежего API 2025 года

src/lib/components/DateWidget.svelte

@@ -1,15 +1,27 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import { dateFormatLong, dateFormatShort } from '$lib/util/Dates';
 
-	let className: string = '';
-	export { className as class };
+	let {
+		dateString,
+		type = undefined,
+		highlight = false,
+		showTime = false,
+		class: className = ''
+	}: {
+		dateString?: string;
+		type?: 'published' | 'updated';
+		highlight?: boolean;
+		showTime?: boolean;
+		class?: string;
+	} = $props();
 
-	export let dateString: string | undefined;
-	export let type: 'published' | 'updated' = 'published';
-	export let highlight = false;
+	const typeToIcon = {
+		published: 'material-symbols:calendar-today',
+		updated: 'material-symbols:update'
+	};
 
-	const icon =
-		type == 'published' ? 'material-symbols:calendar-today' : 'material-symbols:update';
+	const icon = type ? typeToIcon[type] : undefined;
 
 	const highlightClasses = (classes: string) => (highlight ? classes : '');
 </script>
@@ -19,14 +31,12 @@
     {highlightClasses(type == 'published' ? 'bg-amber-600' : 'bg-purple-600')}
     {highlightClasses('text-slate-50')}"
 >
-	<Icon {icon} width={28} height={28} />
+	{#if icon}
+		<Icon {icon} width={28} height={28} />
+	{/if}
 	<span class="text-nowrap">
 		{dateString
-			? new Date(dateString).toLocaleString(undefined, {
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})
+			? (showTime ? dateFormatLong : dateFormatShort).format(new Date(dateString))
 			: 'Не опубликован!'}
 	</span>
 </div>