From 09fe18b2bccb78d52386137f0c42839d86211240 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E6=9E=9C=E5=B1=B1=E5=A4=A7=E5=9C=A3?= Date: Thu, 14 Nov 2024 15:54:21 +0000 Subject: [PATCH 1/4] chore: input[type=date], the modifier number could converted to a timestamp --- .../__tests__/directives/vModel.spec.ts | 55 +++++++++++++++++++ packages/runtime-dom/src/directives/vModel.ts | 15 ++++- 2 files changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 534e5dfe9..968f43d21 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -1377,6 +1377,61 @@ describe('vModel', () => { expect(data.value).toEqual('使用拼音输入') }) + it('should trasform date to timestamp with numebr modifier', async () => { + const component = defineComponent({ + data() { + return { date: null, datetime: null } + }, + render() { + return [ + withVModel( + h('input', { + class: 'date', + type: 'date', + 'onUpdate:modelValue': (val: any) => { + this.date = val + }, + }), + this.date, + { + number: true, + }, + ), + withVModel( + h('input', { + class: 'datetime', + type: 'datetime-local', + 'onUpdate:modelValue': (val: any) => { + console.log('zxxx', val) + this.datetime = val + }, + }), + this.datetime, + { + number: true, + }, + ), + ] + }, + }) + render(h(component), root) + + const date = root.querySelector('.date') + const datetime = root.querySelector('.datetime') + const data = root._vnode.component.data + + date.value = '2024-11-11' + triggerEvent('input', date) + await nextTick() + expect(data.date).toEqual(new Date('2024-11-11').getTime()) + + datetime.value = '2024-11-11T20:00' + triggerEvent('input', datetime) + await nextTick() + expect(data.datetime).toEqual(new Date('2024-11-11T20:00').getTime()) + }) + + // #10503 it('multiple select (model is number, option value is string)', async () => { const component = defineComponent({ data() { diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index 5057e16d4..54271604a 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -53,15 +53,19 @@ export const vModelText: ModelDirective< > = { created(el, { modifiers: { lazy, trim, number } }, vnode) { el[assignKey] = getModelAssigner(vnode) - const castToNumber = - number || (vnode.props && vnode.props.type === 'number') + const vnodeType = vnode.props && vnode.props.type + const castToNumber = number || vnodeType === 'number' + const castToTimeStamp = + number && (vnodeType === 'date' || vnodeType === 'datetime-local') addEventListener(el, lazy ? 'change' : 'input', e => { if ((e.target as any).composing) return let domValue: string | number = el.value if (trim) { domValue = domValue.trim() } - if (castToNumber) { + if (castToTimeStamp) { + domValue = new Date(domValue).getTime() + } else if (castToNumber) { domValue = looseToNumber(domValue) } el[assignKey](domValue) @@ -111,6 +115,11 @@ export const vModelText: ModelDirective< if (trim && el.value.trim() === newValue) { return } + if (number && (el.type === 'date' || el.type === 'datetime-local')) { + if (new Date(el.value).getTime() === value) { + return + } + } } el.value = newValue From 1829c6febc6962fafc8a69a3fdbc6df18002dbdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E6=9E=9C=E5=B1=B1=E5=A4=A7=E5=9C=A3?= Date: Fri, 15 Nov 2024 09:43:47 +0000 Subject: [PATCH 2/4] chore: remote comments in spec.ts --- packages/runtime-dom/src/directives/vModel.ts | 6 ++++-- packages/shared/src/general.ts | 7 +++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index 54271604a..ce9922033 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -8,6 +8,7 @@ import { } from '@vue/runtime-core' import { addEventListener } from '../modules/events' import { + formatDateStamp, invokeArrayFns, isArray, isSet, @@ -64,7 +65,8 @@ export const vModelText: ModelDirective< domValue = domValue.trim() } if (castToTimeStamp) { - domValue = new Date(domValue).getTime() + new Date('2024-03-15 16:49:20'.replace(/-/g, '/')) + domValue = formatDateStamp(domValue) } else if (castToNumber) { domValue = looseToNumber(domValue) } @@ -116,7 +118,7 @@ export const vModelText: ModelDirective< return } if (number && (el.type === 'date' || el.type === 'datetime-local')) { - if (new Date(el.value).getTime() === value) { + if (formatDateStamp(el.value) === value) { return } } diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts index 9c6a23132..d0876698b 100644 --- a/packages/shared/src/general.ts +++ b/packages/shared/src/general.ts @@ -217,3 +217,10 @@ export function genCacheKey(source: string, options: any): string { ) ) } + +export function formatDateStamp(dateStr: string): number { + // Handle iOS compatibility issue by replacing - with / + // 2024-11-15T12:37' => 2024/11/15 12:37' + const normalizedDateStr = dateStr.replace(/-/g, '/').replace('T', ' ') + return new Date(normalizedDateStr).getTime() +} From 1c15a73d4a3adcbb292fcb70f92034e4dd50b844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E6=9E=9C=E5=B1=B1=E5=A4=A7=E5=9C=A3?= Date: Fri, 15 Nov 2024 09:44:56 +0000 Subject: [PATCH 3/4] chore: remote unused code --- packages/runtime-dom/src/directives/vModel.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index ce9922033..ce0bcde97 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -65,7 +65,6 @@ export const vModelText: ModelDirective< domValue = domValue.trim() } if (castToTimeStamp) { - new Date('2024-03-15 16:49:20'.replace(/-/g, '/')) domValue = formatDateStamp(domValue) } else if (castToNumber) { domValue = looseToNumber(domValue) From d4c4d4faaf54d72bf93f34d14acdc4973a9c84a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E6=9E=9C=E5=B1=B1=E5=A4=A7=E5=9C=A3?= Date: Mon, 18 Nov 2024 22:02:14 +0000 Subject: [PATCH 4/4] chore: remote useless console.log --- packages/runtime-dom/__tests__/directives/vModel.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 968f43d21..84794f675 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -1402,7 +1402,6 @@ describe('vModel', () => { class: 'datetime', type: 'datetime-local', 'onUpdate:modelValue': (val: any) => { - console.log('zxxx', val) this.datetime = val }, }),