Svelte: Input modifiers

[Rich-Harris]

https://github.com/sveltejs/svelte/pull/3527#issuecomment-534531584

Is your feature request related to a problem? Please describe.
Date inputs have string bindings, which are rarely helpful.

Describe the solution you'd like
It should be possible to specify the type of binding:

<input type="date" bind:value|date={date_as_date}>
<input type="date" bind:value|number={date_as_number}>
<input type="date" bind:value|string={date_as_string}>

In v4, we can switch the default over to the value|date behaviour.

Describe alternatives you've considered
Adding valueAsNumber and valueAsDate bindings. There are a couple of reasons not to do this:

• It would introduce an inconsistency with how number and range inputs are currently handled
• Resolving that inconsistency would mean expecting people to type valueAsNumber instead of just value. It's unergonomic
• Having multiple binding options makes it easy for someone to use them all simultaneously, which could lead to subtle bugs from not having a single source of truth

How important is this feature to you?
Medium

[Conduitry]

Might it be nice to add |number and |string to type='number' as well?

[Deskbot]

Would be good for <select> which doesn't have a type attribute.

[jimmywarting]

I still would prefer bind : valueAsDate/valueAsNumber

[antony]

I also like bind:value|date syntax, as I think it's a lot cleaner than the messy API exposed by browsers.

[cupcakearmy]

Is there a workaround for now?

[antony]

@cupcakearmy

<input type="date" bind:value={date}>

$: dateAsDate= date && new Date(...date.split('-'))

Rendered

[cupcakearmy]

@antony Thanks for the answer, but I needed 2 way binding.
Got it working though :)
https://svelte.dev/repl/dc963bbead384b69aad17824149d6d27?version=3.25.1