From e6239af7d891053286d532f2ed7060989150d3eb Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 6 Sep 2024 23:36:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20datarange=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A6=82=E6=9E=9C=E4=BC=A0=E5=85=A5utc=E6=97=B6=E9=97=B4,?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BC=9A=E5=87=BA=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/fields/Daterange.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index 812ba8a2..83b00d75 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -22,6 +22,7 @@ import { ref, watch } from 'vue';
 import { TMagicDatePicker } from '@tmagic/design';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -35,7 +36,7 @@ const emit = defineEmits(['change']);
 useAddField(props.prop);
 
 const { names } = props.config;
-const value = ref<(Date | undefined)[] | null>([]);
+const value = ref<(Date | string | undefined)[] | null>([]);
 
 if (props.model !== undefined) {
   if (names?.length) {
@@ -45,9 +46,11 @@ if (props.model !== undefined) {
         if (!value.value) {
           value.value = [];
         }
+
+        const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
         if (!start || !end) value.value = [];
-        if (start !== preStart) value.value[0] = start;
-        if (end !== preEnd) value.value[1] = end;
+        if (start !== preStart) value.value[0] = datetimeFormatter(start, '', format) as string;
+        if (end !== preEnd) value.value[1] = datetimeFormatter(end, '', format) as string;
       },
       {
         immediate: true,
@@ -56,8 +59,13 @@ if (props.model !== undefined) {
   } else if (props.name && props.model[props.name]) {
     watch(
       () => props.model[props.name],
-      (start) => {
-        value.value = start;
+      (start, preStart) => {
+        const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
+
+        if (start !== preStart)
+          value.value = start.map((item: string) =>
+            item ? (datetimeFormatter(item, '', format) as string) : undefined,
+          );
       },
       {
         immediate: true,