From 34339ea69ff7919d0976bf7f5fc775f2cf7196e5 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Fri, 19 Sep 2025 12:20:09 -0400
Subject: [PATCH] fix(web): show danger/warning when taken dates overlap
 (#22213)

---
 i18n/en.json                                  |  1 +
 .../search-bar/search-date-section.svelte     | 45 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index af52770c64..b817ab375f 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1923,6 +1923,7 @@
   "stacktrace": "Stacktrace",
   "start": "Start",
   "start_date": "Start date",
+  "start_date_before_end_date": "Start date must be before end date",
   "state": "State",
   "status": "Status",
   "stop_casting": "Stop casting",
diff --git a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
index 62867805b6..ffb7816e8d 100644
--- a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import DateInput from '$lib/elements/DateInput.svelte';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -14,31 +15,27 @@
   }
 
   let { filters = $bindable() }: Props = $props();
+
+  let invalid = $derived(filters.takenAfter && filters.takenBefore && filters.takenAfter > filters.takenBefore);
+
+  const inputClasses = $derived(
+    `immich-form-input w-full mt-1 hover:cursor-pointer ${invalid ? 'border border-danger' : ''}`,
+  );
 </script>
 
-<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
-  <label class="immich-form-label" for="start-date">
-    <span class="uppercase">{$t('start_date')}</span>
-    <DateInput
-      class="immich-form-input w-full mt-1 hover:cursor-pointer"
-      type="date"
-      id="start-date"
-      name="start-date"
-      max={filters.takenBefore}
-      bind:value={filters.takenAfter}
-    />
-  </label>
+<div class="flex flex-col gap-1">
+  <div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
+    <label class="immich-form-label" for="start-date">
+      <span class="uppercase">{$t('start_date')}</span>
+      <DateInput class={inputClasses} type="date" id="start-date" name="start-date" bind:value={filters.takenAfter} />
+    </label>
 
-  <label class="immich-form-label" for="end-date">
-    <span class="uppercase">{$t('end_date')}</span>
-    <DateInput
-      class="immich-form-input w-full mt-1 hover:cursor-pointer"
-      type="date"
-      id="end-date"
-      name="end-date"
-      placeholder=""
-      min={filters.takenAfter}
-      bind:value={filters.takenBefore}
-    />
-  </label>
+    <label class="immich-form-label" for="end-date">
+      <span class="uppercase">{$t('end_date')}</span>
+      <DateInput class={inputClasses} type="date" id="end-date" name="end-date" bind:value={filters.takenBefore} />
+    </label>
+  </div>
+  {#if invalid}
+    <Text color="danger">{$t('start_date_before_end_date')}</Text>
+  {/if}
 </div>