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

[moushicheng]

close: #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>

[baiwusanyu-c]

looks good👍🏻

[github-actions]

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)

[pikax]

LGTM

[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.

[skirtles-code]

Shouldn't these be using their UTC equivalents?

As far as I can tell, the browser creates a Date object with the time set to midnight UTC for valueAsDate. But for people in timezones with negative offsets (e.g. the Americas), that corresponds to a local time on the previous day.

In my testing, I set my timezone to -0500 and then picked a date using the dropdown. The input then jumps to the previous day.

[moushicheng]

thank your review ,
what you found out is right , i edit my code , here ⬇️

  const year = pad(value.getUTCFullYear(), 4)
  const month = pad(value.getUTCMonth() + 1, 2)
  const date = pad(value.getUTCDate(), 2)

[pkg-pr-new]

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.