vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core
4.86k stars 548 forks source link

Are there any plans to support `input[type="date"]`? #218

Open cawa-93 opened 3 years ago

cawa-93 commented 3 years ago

I did not find any information about it. If has there been a discussion of this issue - please provide a link.

I'm surprised that Vue treats date fields like regular text fields, rather than converting values to the appropriate data type, as it does with numeric fields.

I expected to receive a "date" object or a timestamp with the following code:

<input type="date" v-model="date">

I also tried using a numeric modifier to get a timestamp, but it didn't work.

<input type="date" v-model.number="date">

Are there any obstacles to implementing support for date fields?

jacekkarczmarczyk commented 3 years ago

I'm surprised that Vue treats date fields like regular text fields

that's native behaviour

Demivan commented 3 years ago

Maybe it would make sense to have v-model.date modifier build in.

jods4 commented 3 years ago

It's worth noting that browsers have a valueAsDate property that is a Date object rather than a string, as well as valueAsNumber.

Maybe it would make sense if we could choose which property is bound by v-model (doesn't work currently), e.g.

<input type="date" v-model:valueAsDate="x">

Maybe it's even better if Vue used a VModelDate and VModelNumber directives automatically based on type attribute, as it already does for VModelCheckbox, but that would be a breaking change + wouldn't work in downlevel browsers (e.g. IE11) where type=date is handled like type=text and valueAsDate doesn't exist.

Adding .date modifier is a nice alternative to native properties, and it could work in other contexts as well (e.g. a basic type=text, a custom component, etc.). Note that parsing dates is a pain in browsers, but in type=date or type=datetime-local controls, value is specified to be in ISO format, which always parses fine.

<input type="date" v-model.date="x">

Workaround: here we use a small <my-date> wrapper around <input type=date> to automatically handle this conversion, + a bit more.