feat(runtime-dom): support input type date in v-model with date modifier

[moushicheng]

close: https://github.com/vuejs/core/issues/7738 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. Now,you can directly use Date value,as shown below:

<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) -->
  <!-- typeof myDate.value == [object Date] -->
</template>

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	99.6 kB (+679 B)	37.7 kB (+253 B)	34 kB (+242 B)
vue.global.prod.js	157 kB (+672 B)	57.6 kB (+265 B)	51.2 kB (+256 B)

Usages

Name	Size	Gzip	Brotli
createApp	54.5 kB (+309 B)	21.1 kB (+119 B)	19.3 kB (+139 B)
createSSRApp	58.4 kB (+310 B)	22.8 kB (+160 B)	20.8 kB (+121 B)
defineCustomElement	59.1 kB (+312 B)	22.6 kB (+149 B)	20.6 kB (+113 B)
overall	68.1 kB (+314 B)	26.2 kB (+145 B)	23.8 kB (+175 B)

[skirtles-code]

I was just playing with this and it seems to break typing in values via the keyboard:

• Playground

Testing in Chrome and Firefox, it seems to be broken in slightly different ways, but in both cases I can't enter values by typing in the date I want. The dropdown calendar works fine.

My local date format is dd-mm-yyyy, and I'm entering the digits left to right. I was trying to type in 19-04-2024. Everything is fine for the day and month, but once I start typing in the year it becomes a valid date and tries to parse it. In Chrome it won't let me type more than one digit in the year box. In Firefox it does, but the day box gets corrupted as the year updates.

Without the .date modifier it lets me type in the date just fine.

[pkg-pr-new[bot]]

Open in Stackblitz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@7786

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@7786

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@7786

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@7786

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@7786

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@7786

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@7786

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@7786

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@7786

vue

pnpm add https://pkg.pr.new/vue@7786

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@7786

commit: 3a590b3

[moushicheng]

This pr is a little bit old. yesterday , i found my original code is missing , I haven't figured out why. but i remake my code in commit[162eaba] in first.

[kaaax0815]

what the status on this?

[moushicheng]

what the status on this?

I think this pr is ready, but I don't know why it's taking so long @kaaax0815

[comfuture]

Any update? This issue seems to be implementable using HTMLInputElement.valueAsDate.