fix(DatePicker2): support defaultValue for quarter, close #3006

components/date-picker2/__tests__/index-spec.js

@@ -1257,6 +1257,63 @@ describe('Picker', () => {
             findInput().simulate('keydown', { keyCode: KEYCODE.ENTER });
             assert(getStrValue(wrapper) === '12/02/2020');
         });
+
+        // fix https://github.com/alibaba-fusion/next/issues/3006
+        it('Support defaultValue & value for quarter', () => {
+            let defaultValueList = [
+                [
+                    { in: '2021-Q2', out: '2021-Q2' },
+                    { in: '2021-Q3', out: '2021-Q3' },
+                ],
+                [
+                    { in: '2021-4-1', out: '2021-Q2' },
+                    { in: '2021-8-1', out: '2021-Q3' },
+                ],
+            ];
+            defaultValueList.forEach(defaultValue => {
+                const inValue = defaultValue.map(item => item.in);
+                const outValue = defaultValue.map(item => item.out);
+                wrapper = mount(<RangePicker defaultValue={inValue} mode="quarter" />);
+                assert.deepEqual(getStrValue(), outValue);
+            });
+
+            defaultValueList = [
+                { in: '2021-Q3', out: '2021-Q3' },
+                { in: '2021-7-1', out: '2021-Q3' },
+            ];
+            defaultValueList.forEach(defaultValue => {
+                const { in: inValue, out: outValue } = defaultValue;
+                wrapper = mount(<QuarterPicker defaultValue={inValue} />);
+                assert(getStrValue() === outValue);
+            });
+
+            let valueList = [
+                [
+                    { in: '2021-Q2', out: '2021-Q2' },
+                    { in: '2021-Q3', out: '2021-Q3' },
+                ],
+                [
+                    { in: '2021-4-1', out: '2021-Q2' },
+                    { in: '2021-8-1', out: '2021-Q3' },
+                ],
+            ];
+            valueList.forEach(value => {
+                const inValue = value.map(item => item.in);
+                const outValue = value.map(item => item.out);
+                wrapper = mount(<RangePicker value={inValue} mode="quarter" />);
+                assert.deepEqual(getStrValue(), outValue);
+            });
+
+            valueList = [
+                { in: '2021-Q3', out: '2021-Q3' },
+                { in: '2021-7-1', out: '2021-Q3' },
+            ];
+            valueList.forEach(value => {
+                const { in: inValue, out: outValue } = value;
+                wrapper = mount(<QuarterPicker value={inValue} />);
+                assert(getStrValue() === outValue);
+            });
+        });
     });
 });
 

components/date-picker2/picker.jsx

@@ -14,6 +14,7 @@ import DateInput from './panels/date-input';
 import DatePanel from './panels/date-panel';
 import RangePanel from './panels/range-panel';
 import FooterPanel from './panels/footer-panel';
+import { getValueWithDayjs } from '../util/func';
 
 const { Popup } = Overlay;
 const { pickProps, pickOthers } = obj;
@@ -175,7 +176,9 @@ class Picker extends React.Component {
         }
 
         if ('value' in props) {
-            const value = isRange ? checkRangeDate(props.value, state.inputType, disabled) : checkDate(props.value);
+            let value = getValueWithDayjs(props.value, format);
+
+            value = isRange ? checkRangeDate(value, state.inputType, disabled) : checkDate(value);
 
             if (isValueChanged(value, state.preValue)) {
                 newState = {
@@ -220,12 +223,14 @@ class Picker extends React.Component {
      */
     getInitValue = () => {
         const { props } = this;
-        const { type, value, defaultValue } = props;
+        const { type, value, defaultValue, format } = props;
 
         let val = type === DATE_PICKER_TYPE.RANGE ? [null, null] : null;
 
         val = 'value' in props ? value : 'defaultValue' in props ? defaultValue : val;
 
+        val = getValueWithDayjs(val, format);
+
         return this.checkValue(val);
     };
 

components/util/func.ts

@@ -1,7 +1,6 @@
 import type { ConfigType, OptionType, Dayjs } from 'dayjs';
 import { isPromise } from './object';
 import datejs from './date';
-
 export interface AnyFunction<Result = unknown> {
     (...args: unknown[]): Result;
 }
@@ -198,3 +197,33 @@ export function checkRangeDate(
 
     return [begin, end];
 }
+
+/**
+ * 字符型日期转为dayjs类型
+ */
+export function getValueWithDayjs(
+    val: ConfigType | ConfigType[],
+    format: OptionType
+): Array<Dayjs | null> | Dayjs | null {
+    let date;
+
+    if (Array.isArray(val)) {
+        date = val.map(v => {
+            return checkValueWithDayjs(v, format);
+        });
+    } else {
+        date = checkValueWithDayjs(val, format);
+    }
+    return date;
+}
+
+/**
+ * 将字符型转为dayjs类型，dayjs(x)解析无效时使用dayjs(x,format)再次解析。兼容YYYY-[Q]Q 季度类字符串
+ */
+export function checkValueWithDayjs(val: ConfigType, format: OptionType): Dayjs | null {
+    let date = checkDate(val);
+    if (!date) {
+        date = checkDate(val, format);
+    }
+    return date;
+}