fix(static-date-picker): fix some bug (#1898)

1. 解决了 #1863 引入的 `disabledDate` 判断错误，导致将月份和年份也错误 disabled 的问题；
2. 解决了过去动态时段-回显数据时，时间选择器面板未定位到已选定日期的问题；

fix #1888

Co-authored-by: maxin <maxin@growingio.com>

src/static-date-picker/DatePicker.tsx

@@ -1,24 +1,45 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useControlledState, useLocale, usePrefixCls } from '@gio-design/utils';
 import { LeftDoubleOutlined, LeftOutlined, RightOutlined, RightDoubleOutlined } from '@gio-design/icons';
 import PickerPanel from 'rc-picker/lib/PickerPanel';
 import generateDateFns from 'rc-picker/lib/generate/dateFns';
-import { Locale } from 'rc-picker/lib/interface';
+import { Locale, PickerMode } from 'rc-picker/lib/interface';
 import { isEqual } from 'date-fns';
 import defaultLocale from './locales/zh-CN';
 import { StaticDatePickerProps } from './interfaces';
 
 const OmittedCell: React.FC = () => {
   const spanRef = useRef<HTMLSpanElement>(null);
-  useLayoutEffect(() => {
-    // Remove title prop
-    if (spanRef.current) {
-      const parent = spanRef.current.parentElement;
-      if (parent?.hasAttribute('title')) {
-        parent.removeAttribute('title');
-      }
+  useEffect(() => {
+    const parent = spanRef.current?.parentElement;
+
+    const observer = new MutationObserver((mutationList) => {
+      mutationList.forEach((mutation) => {
+        if (
+          // prettier-disabled
+          mutation.type === 'attributes' &&
+          mutation.attributeName &&
+          parent?.hasAttribute(mutation.attributeName)
+        ) {
+          parent?.removeAttribute(mutation.attributeName);
+        }
+      });
+    });
+
+    if (parent) {
+      const attributes = ['title', 'class'];
+      // 移除已经初始化的 `title` 和 `class` 属性
+      attributes.forEach((attribute) => parent.removeAttribute(attribute));
+      // 监听后续的 `title` 和 `class` 属性变化，然后移除
+      observer.observe(parent, {
+        attributeFilter: attributes,
+        attributes: true,
+        childList: true,
+      });
     }
+    return () => observer.disconnect();
   }, []);
+
   return <span ref={spanRef} />;
 };
 
@@ -27,11 +48,14 @@ const DatePicker: React.FC<StaticDatePickerProps> = ({
   disabledDate: disabledDateProp,
   value,
   defaultValue,
+  onPanelChange,
   ...restProps
 }) => {
   const locale = useLocale<Locale>('DatePicker') || defaultLocale;
   const [viewDate, setViewDate] = useControlledState(viewDateProp, value ?? defaultValue ?? new Date());
 
+  const [mode, setMode] = useState<PickerMode>('date');
+
   const prefixCls = usePrefixCls('picker');
 
   const isSameYearAndDay = (currentDate: Date) =>
@@ -46,10 +70,11 @@ const DatePicker: React.FC<StaticDatePickerProps> = ({
     }
     return <OmittedCell />;
   };
-
   const disabledDate = (currentDate: Date) => {
-    if (!isSameYearAndDay(currentDate)) {
-      return true;
+    if (mode === 'date') {
+      if (!isSameYearAndDay(currentDate)) {
+        return true;
+      }
     }
     if (typeof disabledDateProp === 'function') {
       return disabledDateProp(currentDate);
@@ -69,7 +94,11 @@ const DatePicker: React.FC<StaticDatePickerProps> = ({
       onPickerValueChange={(date) => setViewDate(date)}
       locale={locale}
       prefixCls={prefixCls}
-      picker="date"
+      onPanelChange={(changedValue, changedMode: PickerMode) => {
+        setMode(changedMode);
+        onPanelChange?.(changedValue, changedMode);
+      }}
+      picker={mode}
       generateConfig={generateDateFns}
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

src/static-date-picker/interfaces.ts

@@ -1,4 +1,4 @@
-import { PanelMode, Locale } from 'rc-picker/lib/interface';
+import { Locale, PickerMode } from 'rc-picker/lib/interface';
 import { CommonProps } from '@gio-design/utils';
 
 export type DatePickerLocale = Omit<Locale, 'locale'>;
@@ -23,9 +23,9 @@ export interface StaticDatePickerProps extends CommonProps {
    * 日历面板切换的回调
    *
    * @param value - 当前日期 `Date`
-   * @param mode - 当前模式，目前只会是 `date` 模式
+   * @param mode - 当前模式
    */
-  onPanelChange?: (value: Date, mode: PanelMode) => void;
+  onPanelChange?: (value: Date, mode: PickerMode) => void;
   /**
    * 日期发生变化时的回调
    *

src/static-date-picker/style/index.less

@@ -123,6 +123,11 @@
       cursor: pointer;
     }
 
+    &-start,
+    &-end {
+      color: @gray-3;
+    }
+
     &::before {
       position: absolute;
       right: 0;
@@ -179,7 +184,7 @@
       background: @blue-3;
     }
 
-    &-in-view&-disabled {
+    &-disabled {
       color: @gray-3;
       cursor: not-allowed;
 

src/static-past-time-picker/RelativeRangeBody.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { startOfDay, startOfToday, startOfYesterday, subMonths } from 'date-fns';
+import { startOfDay, startOfYesterday } from 'date-fns';
 import DatePicker from '../static-date-picker';
 import DateRangePicker from '../static-date-range-picker';
 import { RelativeRangeBodyProps } from './interfaces';
@@ -11,14 +11,7 @@ function RelativeRangeBody({ dateRange, fixedMode, onRangeChange, disabledDate }
     };
     return <DatePicker disabledDate={disabledDate} value={dateRange[0]} onSelect={handleOnSelect} />;
   }
-  return (
-    <DateRangePicker
-      defaultViewDates={[subMonths(startOfToday(), 1), startOfYesterday()]}
-      disabledDate={disabledDate}
-      onSelect={onRangeChange}
-      value={dateRange as [Date, Date]}
-    />
-  );
+  return <DateRangePicker disabledDate={disabledDate} onSelect={onRangeChange} value={dateRange as [Date, Date]} />;
 }
 
 export default RelativeRangeBody;