Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Why isn't value assigned and cleared here?

$
0
0

I'm trying Svelte 5 for the first time today.

This is a reproduction of this issue.

As you can see if I select a date from the picker the {value} is not assigned and the same if I press the "Clear" button.

Why?

Relevant code

<script lang="ts">    type Props = {        value?: Date | null;        id?: string;        onchange?: (e: Date | undefined) => void;    };    let {        value = $bindable(),        id,        onchange,    }: Props = $props();    $effect(() => {        console.log('value in $effect:', value);    });    $inspect(value);    const format = (date: typeof value): string => {        if (!date) return '';        if (date instanceof Date && isNaN(date.getTime())) return '';        return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -8);    };    function handleOnChange(e: Event) {        const dateValue = new Date((e.target as HTMLInputElement).value);        console.log('handleOnChange:', dateValue);        value = dateValue;        if (onchange) onchange(dateValue);    }    function handleClear() {        console.log('handleClear :');        value = undefined;        if (onchange) onchange(value);        (document.getElementById(id) as HTMLInputElement).value = '';    }</script><div>    {value}<button type="button" onclick={handleClear}>Clear</button><input        type="datetime-local"        {id}        value={format(value)}        onchange={handleOnChange}    /></div>

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>