chore(web): use DatePicker component from UI lib (#28406)

2026-05-13 16:37:07 +02:00 · 2026-05-13 16:37:07 +02:00 · 024f20ea26
parent 0a4ed6fd71
commit 024f20ea26
5 changed files with 46 additions and 74 deletions
--- a/i18n/en.json
+++ b/i18n/en.json
@ -885,15 +885,13 @@
  "cutoff_date_description": "Keep photos from the last…",
  "cutoff_day": "{count, plural, one {day} other {days}}",
  "cutoff_year": "{count, plural, one {year} other {years}}",
-  "daily_title_text_date": "E, MMM dd",
-  "daily_title_text_date_year": "E, MMM dd, yyyy",
  "dark": "Dark",
  "dark_theme": "Switch to dark theme",
  "date": "Date",
  "date_after": "Date after",
  "date_and_time": "Date and Time",
  "date_before": "Date before",
-  "date_format": "E, LLL d, y • h:mm a",
+  "date_of_birth": "Date of birth",
  "date_of_birth_saved": "Date of birth saved successfully",
  "date_range": "Date range",
  "day": "Day",
@ -1583,7 +1581,6 @@
  "mobile_app_download_onboarding_note": "Download the companion mobile app using the following options",
  "model": "Model",
  "month": "Month",
-  "monthly_title_text_date_format": "MMMM y",
  "more": "More",
  "motion": "Motion",
  "move": "Move",
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@ -212,16 +212,10 @@
      };
    }

-    try {
-      return {
-        fileCreatedAfter: dateAfter ? new Date(dateAfter).toISOString() : undefined,
-        fileCreatedBefore: dateBefore ? new Date(dateBefore).toISOString() : undefined,
-      };
-    } catch {
-      $mapSettings.dateAfter = '';
-      $mapSettings.dateBefore = '';
-      return {};
-    }
+    return {
+      fileCreatedAfter: dateAfter?.toUTC().toISO(),
+      fileCreatedBefore: dateBefore?.toUTC().toISO(),
+    };
  }

  async function loadMapMarkers() {
@ -237,7 +231,7 @@
      {
        isArchived: includeArchived || undefined,
        isFavorite: onlyFavorites || undefined,
-        fileCreatedAfter: fileCreatedAfter || undefined,
+        fileCreatedAfter,
        fileCreatedBefore,
        withPartners: withPartners || undefined,
        withSharedAlbums: withSharedAlbums || undefined,
--- a/web/src/lib/modals/MapSettingsModal.svelte
+++ b/web/src/lib/modals/MapSettingsModal.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
  import type { MapSettings } from '$lib/stores/preferences.store';
-  import { Button, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
+  import { Button, DatePicker, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
  import { Duration } from 'luxon';
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
@ -41,29 +40,21 @@

    {#if customDateRange}
      <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
-        <div class="flex items-center justify-between gap-8">
-          <label class="shrink-0 text-sm immich-form-label" for="date-after">{$t('date_after')}</label>
-          <DateInput
-            class="immich-form-input w-40"
-            type="date"
-            id="date-after"
-            max={settings.dateBefore}
-            bind:value={settings.dateAfter}
-          />
-        </div>
-        <div class="flex items-center justify-between gap-8">
-          <label class="shrink-0 text-sm immich-form-label" for="date-before">{$t('date_before')}</label>
-          <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
-        </div>
-        <div class="flex justify-center text-xs">
+        <Field label={$t('date_after')}>
+          <DatePicker bind:value={settings.dateAfter} maxDate={settings.dateBefore} />
+        </Field>
+        <Field label={$t('date_before')}>
+          <DatePicker bind:value={settings.dateBefore} />
+        </Field>
+        <div class="flex justify-center">
          <Button
            color="primary"
            size="small"
            variant="ghost"
            onclick={() => {
              customDateRange = false;
-              settings.dateAfter = '';
-              settings.dateBefore = '';
+              settings.dateAfter = undefined;
+              settings.dateBefore = undefined;
            }}
          >
            {$t('remove_custom_date_range')}
@ -71,7 +62,7 @@
        </div>
      </div>
    {:else}
-      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
+      <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-2">
        <Field label={$t('date_range')}>
          <Select
            bind:value={settings.relativeDate}
@ -82,40 +73,38 @@
              },
              {
                label: $t('past_durations.hours', { values: { hours: 24 } }),
-                value: Duration.fromObject({ hours: 24 }).toISO() || '',
+                value: Duration.fromObject({ hours: 24 }).toISO(),
              },
              {
                label: $t('past_durations.days', { values: { days: 7 } }),
-                value: Duration.fromObject({ days: 7 }).toISO() || '',
+                value: Duration.fromObject({ days: 7 }).toISO(),
              },
              {
                label: $t('past_durations.days', { values: { days: 30 } }),
-                value: Duration.fromObject({ days: 30 }).toISO() || '',
+                value: Duration.fromObject({ days: 30 }).toISO(),
              },
              {
                label: $t('past_durations.years', { values: { years: 1 } }),
-                value: Duration.fromObject({ years: 1 }).toISO() || '',
+                value: Duration.fromObject({ years: 1 }).toISO(),
              },
              {
                label: $t('past_durations.years', { values: { years: 3 } }),
-                value: Duration.fromObject({ years: 3 }).toISO() || '',
+                value: Duration.fromObject({ years: 3 }).toISO(),
              },
            ]}
          />
        </Field>
-        <div class="text-xs">
-          <Button
-            color="primary"
-            size="small"
-            variant="ghost"
-            onclick={() => {
-              customDateRange = true;
-              settings.relativeDate = '';
-            }}
-          >
-            {$t('use_custom_date_range')}
-          </Button>
-        </div>
+        <Button
+          color="primary"
+          size="small"
+          variant="ghost"
+          onclick={() => {
+            customDateRange = true;
+            settings.relativeDate = '';
+          }}
+        >
+          {$t('use_custom_date_range')}
+        </Button>
      </div>
    {/if}
  </Stack>
--- a/web/src/lib/modals/PersonEditBirthDateModal.svelte
+++ b/web/src/lib/modals/PersonEditBirthDateModal.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
  import { handleUpdatePersonBirthDate } from '$lib/services/person.service';
  import { type PersonResponseDto } from '@immich/sdk';
-  import { Button, FormModal, Text } from '@immich/ui';
+  import { Button, DatePicker, Field, FormModal, HelperText } from '@immich/ui';
  import { mdiCake } from '@mdi/js';
+  import { DateTime } from 'luxon';
  import { t } from 'svelte-i18n';

  type Props = {
@ -12,32 +12,25 @@
  };

  let { person, onClose }: Props = $props();
-  let birthDate = $derived(person.birthDate ?? '');
+  let birthDate = $derived(person.birthDate ? DateTime.fromISO(person.birthDate) : undefined);

  const onSubmit = async () => {
-    const success = await handleUpdatePersonBirthDate(person, birthDate);
+    const success = await handleUpdatePersonBirthDate(person, birthDate?.toISODate() ?? '');
    if (success) {
      onClose();
    }
  };
-
-  const todayFormatted = new Date().toISOString().split('T')[0];
 </script>

 <FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}>
-  <Text size="small">{$t('birthdate_set_description')}</Text>
-  <div class="my-4 flex flex-col gap-2">
-    <DateInput
-      class="immich-form-input"
-      id="birthDate"
-      name="birthDate"
-      type="date"
-      bind:value={birthDate}
-      max={todayFormatted}
-    />
+  <div class="my-2 flex flex-col gap-2">
+    <Field label={$t('date_of_birth')}>
+      <DatePicker bind:value={birthDate} maxDate={DateTime.now()} />
+      <HelperText>{$t('birthdate_set_description')}</HelperText>
+    </Field>
    {#if person.birthDate}
      <div class="flex justify-end">
-        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
+        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = undefined)}>
          {$t('clear')}
        </Button>
      </div>
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@ -1,3 +1,4 @@
+import type { DateTime } from 'luxon';
 import { persisted } from 'svelte-persisted-store';
 import { browser } from '$app/environment';
 import { defaultLang } from '$lib/constants';
@ -26,8 +27,8 @@ export interface MapSettings {
  withPartners: boolean;
  withSharedAlbums: boolean;
  relativeDate: string;
-  dateAfter: string;
-  dateBefore: string;
+  dateAfter?: DateTime<true>;
+  dateBefore?: DateTime<true>;
 }

 const defaultMapSettings = {
@ -37,8 +38,6 @@ const defaultMapSettings = {
  withPartners: false,
  withSharedAlbums: false,
  relativeDate: '',
-  dateAfter: '',
-  dateBefore: '',
 };

 const persistedObject = <T>(key: string, defaults: T) =>