diff --git a/web/src/lib/components/elements/date-input.svelte b/web/src/lib/components/elements/date-input.svelte new file mode 100644 index 0000000000..e4ec4bcab8 --- /dev/null +++ b/web/src/lib/components/elements/date-input.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import type { HTMLInputAttributes } from 'svelte/elements'; + + interface $$Props extends HTMLInputAttributes { + type: 'date' | 'datetime-local'; + } + + export let value: $$Props['value'] = undefined; + $: updatedValue = value; +</script> + +<input + {...$$restProps} + {value} + on:input={(e) => { + updatedValue = e.currentTarget.value; + + // Only update when value is not empty to prevent resetting the input + if (updatedValue !== '') { + value = updatedValue; + } + }} + on:blur={() => (value = updatedValue)} +/> diff --git a/web/src/lib/components/faces-page/set-birth-date-modal.svelte b/web/src/lib/components/faces-page/set-birth-date-modal.svelte index 415f5c0f76..717b88d031 100644 --- a/web/src/lib/components/faces-page/set-birth-date-modal.svelte +++ b/web/src/lib/components/faces-page/set-birth-date-modal.svelte @@ -4,6 +4,7 @@ import FullScreenModal from '../shared-components/full-screen-modal.svelte'; import { mdiCake } from '@mdi/js'; import Icon from '$lib/components/elements/icon.svelte'; + import DateInput from '../elements/date-input.svelte'; export let birthDate: string; @@ -37,7 +38,7 @@ <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off"> <div class="m-4 flex flex-col gap-2"> - <input + <DateInput class="immich-form-input" id="birthDate" name="birthDate" diff --git a/web/src/lib/components/map-page/map-settings-modal.svelte b/web/src/lib/components/map-page/map-settings-modal.svelte index 17fd558ab3..49d841116a 100644 --- a/web/src/lib/components/map-page/map-settings-modal.svelte +++ b/web/src/lib/components/map-page/map-settings-modal.svelte @@ -8,6 +8,7 @@ import LinkButton from '../elements/buttons/link-button.svelte'; import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte'; import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte'; + import DateInput from '../elements/date-input.svelte'; export let settings: MapSettings; let customDateRange = !!settings.dateAfter || !!settings.dateBefore; @@ -38,7 +39,7 @@ <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4"> <div class="flex items-center justify-between gap-8"> <label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label> - <input + <DateInput class="immich-form-input w-40" type="date" id="date-after" @@ -48,7 +49,7 @@ </div> <div class="flex items-center justify-between gap-8"> <label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label> - <input class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} /> + <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} /> </div> <div class="flex justify-center text-xs"> <LinkButton diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte index 3972c0c665..f4c45c1e03 100644 --- a/web/src/lib/components/shared-components/change-date.svelte +++ b/web/src/lib/components/shared-components/change-date.svelte @@ -3,6 +3,7 @@ import { DateTime } from 'luxon'; import ConfirmDialogue from './confirm-dialogue.svelte'; import Combobox from './combobox.svelte'; + import DateInput from '../elements/date-input.svelte'; export let initialDate: DateTime = DateTime.now(); @@ -74,7 +75,7 @@ <div class="mt-2" /> <div class="flex flex-col"> <label for="datetime">Date and Time</label> - <input + <DateInput class="immich-form-input text-sm my-4 w-full" id="datetime" type="datetime-local" 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 02fa903309..f08436bd00 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 @@ -6,13 +6,15 @@ </script> <script lang="ts"> + import DateInput from '$lib/components/elements/date-input.svelte'; + export let filters: SearchDateFilter; </script> <div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5"> <label class="immich-form-label" for="start-date"> <span>START DATE</span> - <input + <DateInput class="immich-form-input w-full mt-1 hover:cursor-pointer" type="date" id="start-date" @@ -24,7 +26,7 @@ <label class="immich-form-label" for="end-date"> <span>END DATE</span> - <input + <DateInput class="immich-form-input w-full mt-1 hover:cursor-pointer" type="date" id="end-date"