Files
immich/web/src/lib/components/elements/date-input.svelte
Alex 20ba800a50 fix(web): date time change reactivity (#17306)
* fix(web): date time change reactivity

* remove logs
2025-04-01 18:57:53 +00:00

35 lines
799 B
Svelte

<script lang="ts">
interface Props {
type: 'date' | 'datetime-local';
value?: string;
min?: string;
max?: string;
class?: string;
id?: string;
name?: string;
placeholder?: string;
}
let { type, value = $bindable(), max = undefined, ...rest }: Props = $props();
let fallbackMax = $derived(type === 'date' ? '9999-12-31' : '9999-12-31T23:59');
// Updating `value` directly causes the date input to reset itself or
// interfere with user changes.
let updatedValue = $derived(value);
</script>
<input
{...rest}
{type}
bind:value
max={max || fallbackMax}
oninput={(e) => (updatedValue = e.currentTarget.value)}
onblur={() => (value = updatedValue)}
onkeydown={(e) => {
if (e.key === 'Enter') {
value = updatedValue;
}
}}
/>