fix: 修复右侧面板月份展示错误 (#1802)

* fix: 修复右侧面板月份展示错误 * fix: 修复右侧面板月份展示错误
Tencent · Dec 14, 2022 · 28a7d75 · 28a7d75
1 parent 0d3e20b
commit 28a7d75
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 62 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -7,8 +7,14 @@ import { TdDateRangePickerProps } from './type';
 import { RangeInputPopup } from '../range-input';
 import RangePanel from './panel/RangePanel';
 import useRange from './hooks/useRange';
-import { initYearMonthTime } from './hooks/useRangeValue';
-import { parseToDayjs, formatTime, formatDate, isValidDate, getDefaultFormat } from '../_common/js/date-picker/format';
+import {
+  parseToDayjs,
+  formatTime,
+  formatDate,
+  isValidDate,
+  getDefaultFormat,
+  initYearMonthTime,
+} from '../_common/js/date-picker/format';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
 import { dateRangePickerDefaultProps } from './defaultProps';
 import log from '../_common/js/log';
@@ -77,8 +83,9 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
 
       // 空数据重置为当前年月
       if (!value.length) {
-        setYear(initYearMonthTime({ value, mode, format }).year);
-        setMonth(initYearMonthTime({ value, mode, format, enableTimePicker }).month);
+        const { year: defaultYear, month: defaultMonth } = initYearMonthTime({ value, mode, format, enableTimePicker });
+        setYear(defaultYear);
+        setMonth(defaultMonth);
       } else if (value.length === 2 && !enableTimePicker) {
         // 确保右侧面板月份比左侧大 避免两侧面板月份一致
         const nextMonth = value.map((v: string) => parseToDayjs(v, format).month());

diff --git a/src/date-picker/hooks/useRangeValue.ts b/src/date-picker/hooks/useRangeValue.ts
@@ -1,57 +1,18 @@
 import { useState, useEffect } from 'react';
-import dayjs from 'dayjs';
 import useControlled from '../../hooks/useControlled';
-import { TdDateRangePickerProps, DateRangeValue } from '../type';
+import { TdDateRangePickerProps } from '../type';
 import {
   isValidDate,
   formatDate,
   formatTime,
   getDefaultFormat,
-  parseToDayjs,
+  initYearMonthTime,
 } from '../../_common/js/date-picker/format';
 import { extractTimeFormat } from '../../_common/js/date-picker/utils';
 import log from '../../_common/js/log';
 
 export const PARTIAL_MAP = { first: 'start', second: 'end' };
 
-// 初始化面板年份月份
-export function initYearMonthTime({
-  value,
-  mode = 'date',
-  format,
-  timeFormat = 'HH:mm:ss',
-  enableTimePicker,
-}: {
-  value: DateRangeValue;
-  mode: string;
-  format: string;
-  timeFormat?: string;
-  enableTimePicker?: boolean;
-}) {
-  const defaultYearMonthTime = {
-    year: [dayjs().year(), dayjs().year()],
-    month: [dayjs().month(), dayjs().month()],
-    time: [dayjs().format(timeFormat), dayjs().format(timeFormat)],
-  };
-  if (mode === 'year') {
-    defaultYearMonthTime.year[1] += 10;
-  } else if (mode === 'month' || mode === 'quarter') {
-    defaultYearMonthTime.year[1] += 1;
-  } else if ((mode === 'date' || mode === 'week') && !enableTimePicker) {
-    defaultYearMonthTime.month[1] += 1;
-  }
-
-  if (!value || !Array.isArray(value) || !value.length) {
-    return defaultYearMonthTime;
-  }
-
-  return {
-    year: value.map((v) => parseToDayjs(v, format).year()),
-    month: value.map((v) => parseToDayjs(v, format).month()),
-    time: value.map((v) => parseToDayjs(v, format).format(timeFormat)),
-  };
-}
-
 export default function useRange(props: TdDateRangePickerProps) {
   const [value, onChange] = useControlled(props, 'value', props.onChange);
 

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -69970,22 +69970,20 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                           >
                             <div
                               class="t-input__wrap"
-                              value=" "
+                              value="Jan"
                             >
                               <div
                                 class="t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix"
                               >
                                 <div
                                   class="t-input__prefix"
-                                >
-                                  12
-                                </div>
+                                />
                                 <input
                                   class="t-input__inner"
-                                  placeholder=""
+                                  placeholder="please select"
                                   readonly=""
                                   type="text"
-                                  value=" "
+                                  value="Jan"
                                 />
                                 <span
                                   class="t-input__suffix t-input__suffix-icon"
@@ -70018,7 +70016,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                           >
                             <div
                               class="t-input__wrap"
-                              value="2020"
+                              value="2021"
                             >
                               <div
                                 class="t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix"
@@ -70031,7 +70029,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                                   placeholder="please select"
                                   readonly=""
                                   type="text"
-                                  value="2020"
+                                  value="2021"
                                 />
                                 <span
                                   class="t-input__suffix t-input__suffix-icon"
@@ -74618,22 +74616,20 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                         >
                           <div
                             class="t-input__wrap"
-                            value=" "
+                            value="Jan"
                           >
                             <div
                               class="t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix"
                             >
                               <div
                                 class="t-input__prefix"
-                              >
-                                12
-                              </div>
+                              />
                               <input
                                 class="t-input__inner"
-                                placeholder=""
+                                placeholder="please select"
                                 readonly=""
                                 type="text"
-                                value=" "
+                                value="Jan"
                               />
                               <span
                                 class="t-input__suffix t-input__suffix-icon"
@@ -74666,7 +74662,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                         >
                           <div
                             class="t-input__wrap"
-                            value="2020"
+                            value="2021"
                           >
                             <div
                               class="t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix"
@@ -74679,7 +74675,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/panel.jsx 1`] = `
                                 placeholder="please select"
                                 readonly=""
                                 type="text"
-                                value="2020"
+                                value="2021"
                               />
                               <span
                                 class="t-input__suffix t-input__suffix-icon"
+44 −0		js/date-picker/format.ts
+18 −0		js/global-config/locale/en_US.ts
+18 −0		js/global-config/locale/ja_JP.ts
+18 −0		js/global-config/locale/ko_KR.ts
+18 −0		js/global-config/locale/zh_CN.ts
+4 −0		style/web/components/input-adornment/_index.less
+15 −5		style/web/components/select-input/_index.less