Support input type date in v-model with number modifier and date modifier

[thedamon]

What problem does this feature solve?

Currently it is cumbersome to use native input type="date" elements, as their native 'value' is a date 'string' (such as 2023-02-16), you always need to provide an intermediate conversion in order to use the value of your input as an actual Date, or as a timestamp.

Adding a v-model.date modifier that returns DateInput.valueAsDate and modifying the behaviour of v-model.number to return DateInput.valueAsNumber when it's used on an input[type=date] instead of the current behaviour (which results in just the year being returned), would make using these native inputs much more ergonomic for developers.

The date modifier could be useful for other inputs as well, but I think it is mainly important to encourage the simple usage of browser native built in inputs to promote standards and accessibility.

What does the proposed API look like?

Only outward facing change would be the behaviour of the number modifier on date inputs, and a new .date modifier which typecasts input value as a date.

<script setup>
import { ref } from 'vue';
const myDate = ref(new Date('2023-02-16'));
</script>

<template>
  <input type="date" v-model.date="myDate"/> 
  <!-- would cast to a Date object: Wed Feb 15 2023 19:00:00 GMT-0500 (Eastern Standard Time) -->

<input type="date" v-model.number="myDate"/> 
<!-- would cast value as a timestamp: 1702684800000, instead of current behaviour which is 2023 -->
</template>

Updating number casting behaviour for date inputs may be considered a breaking change (or it could be considered a bugfix). If that is not desirable, either a timestamp modifier could be added, or it could be left as is.

While input type number automatically casts to a number, I'm not sure this is desirable with date inputs because it would be a breaking change and because depending on the individual use-case the ISO formatted date string can sometimes be more useful.

[moushicheng]

hey ,guys. Forgive me for not reading very understand your mean
myData.value==Date object when use [type="date"]
and myData.value=='1702684800000' when use [type="date"] ?

  // now myData.value==Date object: Wed Feb 15 2023 19:00:00 GMT-0500
  <input type="date" v-model.date="myDate"/>
  // now myData.value==1702684800000
  <input type="date" v-model.number="myDate"/> 

[thedamon]

@moushicheng If i understand your question, yes. The value of the ref is what I'm suggesting could be cast (just like existing v-model modifiers). I didn't include that in my example because it was in the template scope so it was unwrapped.