From d22e520fbf6fc95c2c9600f02107d987b3a46fa7 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 28 Oct 2025 15:29:50 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20daterange=20=E9=85=8D=E7=BD=AEname?=
 =?UTF-8?q?s=E5=90=8E=E9=85=8D=E7=BD=AE=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Container.vue    |  5 +-
 packages/form/src/fields/Daterange.vue        | 54 ++++++++++++-------
 .../src/DatePicker.vue                        |  4 ++
 playground/src/configs/formDsl.ts             |  4 +-
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index d75e431d..be14bd2e 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -208,10 +208,7 @@ const items = computed(() => (props.config as ContainerCommonConfig).items);
 
 const itemProp = computed(() => {
   let n: string | number = '';
-  const { names } = props.config as any;
-  if (names?.[0]) {
-    [n] = names;
-  } else if (name.value) {
+  if (name.value) {
     n = name.value;
   } else {
     return props.prop;
diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index fa25e006..c31e3862 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -9,6 +9,7 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :format="`${config.dateFormat || 'YYYY/MM/DD'} ${config.timeFormat || 'HH:mm:ss'}`"
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :date-format="config.dateFormat || 'YYYY/MM/DD'"
     :time-format="config.timeFormat || 'HH:mm:ss'"
@@ -17,11 +18,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
 import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -40,7 +41,7 @@ const value = ref<(Date | string | undefined)[] | null>([]);
 
 if (props.model !== undefined) {
   if (names?.length) {
-    watch(
+    const unWatch = watch(
       [() => props.model[names[0]], () => props.model[names[1]]],
       ([start, end], [preStart, preEnd]) => {
         if (!value.value) {
@@ -56,8 +57,12 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+
+    onUnmounted(() => {
+      unWatch();
+    });
   } else if (props.name && props.model[props.name]) {
-    watch(
+    const unWatch = watch(
       () => props.model[props.name],
       (start, preStart) => {
         const format = `${props.config.dateFormat || 'YYYY/MM/DD'} ${props.config.timeFormat || 'HH:mm:ss'}`;
@@ -71,32 +76,41 @@ if (props.model !== undefined) {
         immediate: true,
       },
     );
+    onUnmounted(() => {
+      unWatch();
+    });
   }
 }
 
-const setValue = (v: Date[] | Date) => {
-  names?.forEach((item, index) => {
-    if (!props.model) {
-      return;
-    }
-    if (Array.isArray(v)) {
-      props.model[item] = v[index];
-    } else {
-      props.model[item] = undefined;
-    }
-  });
-};
-
 const changeHandler = (v: Date[]) => {
   const value = v || [];
 
   if (props.name) {
     emit('change', value);
   } else {
-    if (names?.length) {
-      setValue(value);
+    if (props.config.names?.length) {
+      const newChangeRecords: ChangeRecord[] = [];
+      props.config.names.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: v[index],
+          });
+        } else {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: undefined,
+          });
+        }
+      });
+
+      emit('change', props.model, {
+        changeRecords: newChangeRecords,
+      });
     }
-    emit('change', props.model);
   }
 };
 </script>
diff --git a/packages/tdesign-vue-next-adapter/src/DatePicker.vue b/packages/tdesign-vue-next-adapter/src/DatePicker.vue
index 9af71ec5..c4a2d112 100644
--- a/packages/tdesign-vue-next-adapter/src/DatePicker.vue
+++ b/packages/tdesign-vue-next-adapter/src/DatePicker.vue
@@ -1,6 +1,9 @@
 <template>
   <TDateRangePicker
     v-if="type.endsWith('range')"
+    allow-input
+    clearable
+    enable-time-picker
     :modelValue="modelValue"
     :mode="mode"
     :placeholder="[startPlaceholder || '', endPlaceholder || '']"
@@ -14,6 +17,7 @@
   />
   <TDatePicker
     v-else
+    clearable
     :modelValue="modelValue"
     :mode="mode"
     :placeholder="placeholder"
diff --git a/playground/src/configs/formDsl.ts b/playground/src/configs/formDsl.ts
index ca3bcdd0..c3284621 100644
--- a/playground/src/configs/formDsl.ts
+++ b/playground/src/configs/formDsl.ts
@@ -56,8 +56,8 @@ export default createForm([
   {
     type: 'daterange',
     text: '日期范围',
-    name: 'daterange',
-    // names: ['one', 'two'],
+    // name: 'daterange',
+    names: ['one', 'two'],
   },
   {
     type: 'time',