Input modifiers

[Rich-Harris]

#3527 (comment)

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

with the reasoning being: "Don't make me learn how to use another framework"
use what the browser provides so that i can apply same knowledge in tomorrows new frameworks

It would just be easier to use the built tools then to write redundant wrappers around something that already exist and can do it for you

[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

[pal03377]

Just an idea: Maybe this concept could work in a more general way: I'd imagine having a way to change the internal representation of an input would be very nice. This isn't very well thought out yet, but what about something like

<script>
	
	let date = new Date();
	
	const dateModifier = {
            parse: (dateString) => new Date(Date.parse(dateString))
        };
	
</script>

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

The nice thing about this would be that you could also use this with other kinds of inputs well. For example, you could automatically have a localized input like this with less code, for example:

<script>
	
	let number = 1234567;
	
	const numberModifier = {
            parse: (s) => parseInt(s.replace(/\,/g, "")), 
            stringify: (n) => n.toLocaleString("en-US")
        };
	
</script>

<input type="text" bind:value|numberModifier={ number }>

...and you would not need the temporary internal variable any more.

I personally find my own code suggestion a bit ugly here, but would love the general idea of being able to have a variable contain something different than the exact input value given by HTML.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.