fix(DatePicker): 修复输入框有值时面板切换失效问题 (#1293)

* fix: 修复有值时面板切换失效问题 * fix: 修复有值时面板切换失效问题
Tencent · Aug 15, 2022 · 5d95280 · 5d95280
1 parent 790d4a0
commit 5d95280
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, watchEffect, computed } from '@vue/composition-api';
+import { defineComponent, watch, computed } from '@vue/composition-api';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'tdesign-icons-vue';
 import { usePrefixClass } from '../hooks/useConfig';
@@ -42,9 +42,9 @@ export default defineComponent({
       enableTimePicker: props.enableTimePicker,
     }));
 
-    watchEffect(() => {
+    watch(popupVisible, (visible) => {
       // 面板展开重置数据
-      if (popupVisible.value) {
+      if (visible) {
         year.value = parseToDayjs(value.value || new Date(), formatRef.value.format).year();
         month.value = parseToDayjs(value.value || new Date(), formatRef.value.format).month();
         time.value = formatTime(value.value || new Date(), formatRef.value.timeFormat);

diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -1,5 +1,5 @@
 import {
-  defineComponent, watchEffect, computed, ref,
+  defineComponent, watch, computed, ref,
 } from '@vue/composition-api';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'tdesign-icons-vue';
@@ -49,9 +49,9 @@ export default defineComponent({
     // 记录面板是否选中过
     const isSelected = ref(false);
 
-    watchEffect(() => {
+    watch(popupVisible, (visible) => {
       // 面板展开重置数据
-      if (popupVisible.value) {
+      if (visible) {
         isSelected.value = false;
         isFirstValueSelected.value = false;
         cacheValue.value = formatDate(value.value || [], {
@@ -113,8 +113,8 @@ export default defineComponent({
       // 不开启时间选择时 结束时间默认重置为 23:59:59
       if (activeIndex.value && !props.enableTimePicker) date.setHours(23, 59, 59);
 
-      props.onPick?.(date, { e, partial });
-      emit('pick', date, { e, partial });
+      props.onPick?.(date, { e, partial: activeIndex.value ? 'end' : 'start' });
+      emit('pick', date, { e, partial: activeIndex.value ? 'end' : 'start' });
 
       isHoverCell.value = false;
       isSelected.value = true;

diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx
@@ -172,7 +172,7 @@ export default defineComponent({
                 key="startPanel"
                 {...{
                   props: {
-                    partial: this.activeIndex ? 'end' : 'start',
+                    partial: 'start',
                     year: this.year[0],
                     month: this.month[0],
                     time: this.time[0],
@@ -186,7 +186,7 @@ export default defineComponent({
                 key="endPanel"
                 {...{
                   props: {
-                    partial: this.activeIndex ? 'end' : 'start',
+                    partial: 'end',
                     year: this.year[1],
                     month: this.month[1],
                     time: this.time[1],