feat(static-date-picker): hide non-current month's dates (#1863)

* fix(date-range-picker): each select will trigger  onSelect

* feat(static-date-picker): hide non-current month's dates

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

src/date-range-picker/Picker.tsx

@@ -56,9 +56,9 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
 
   const handleOnSelect = (currentValue: [NullableDate, NullableDate], index: number) => {
     setControlledValue(currentValue);
+    onSelect?.(currentValue, formatDates(currentValue, formatString));
     if (index) {
       setVisible(false);
-      onSelect?.(currentValue, formatDates(currentValue, formatString));
     }
   };
 

src/static-date-picker/DatePicker.tsx

@@ -1,31 +1,82 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from 'react';
-import { useLocale, usePrefixCls } from '@gio-design/utils';
+import React, { useLayoutEffect, useRef } 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 { isEqual } from 'date-fns';
 import defaultLocale from './locales/zh-CN';
 import { StaticDatePickerProps } from './interfaces';
 
-function DatePicker({ viewDate, ...restProps }: StaticDatePickerProps) {
+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');
+      }
+    }
+  }, []);
+  return <span ref={spanRef} />;
+};
+
+const DatePicker: React.FC<StaticDatePickerProps> = ({
+  viewDate: viewDateProp,
+  disabledDate: disabledDateProp,
+  ...restProps
+}) => {
   const locale = useLocale<Locale>('DatePicker') || defaultLocale;
+  const [viewDate, setViewDate] = useControlledState(viewDateProp, new Date());
+
+  const prefixCls = usePrefixCls('picker');
+
+  const isSameYearAndDay = (currentDate: Date) =>
+    isEqual(
+      new Date(currentDate.getFullYear(), currentDate.getMonth()),
+      new Date(viewDate.getFullYear(), viewDate.getMonth())
+    );
+
+  const omitOtherDate = (currentDate: Date) => {
+    if (isSameYearAndDay(currentDate)) {
+      return <div className={`${prefixCls}-cell-inner`}>{currentDate.getDate()}</div>;
+    }
+    return <OmittedCell />;
+  };
+
+  const disabledDate = (currentDate: Date) => {
+    if (!isSameYearAndDay(currentDate)) {
+      return true;
+    }
+    if (typeof disabledDateProp === 'function') {
+      return disabledDateProp(currentDate);
+    }
+    return false;
+  };
+
   return (
     <PickerPanel<Date>
       data-testid="static-date-picker"
+      dateRender={omitOtherDate}
+      disabledDate={disabledDate}
       {...restProps}
       pickerValue={viewDate}
+      onPickerValueChange={(date) => setViewDate(date)}
       locale={locale}
-      prefixCls={usePrefixCls('picker')}
+      prefixCls={prefixCls}
       picker="date"
       generateConfig={generateDateFns}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       superPrevIcon={<LeftDoubleOutlined />}
       prevIcon={<LeftOutlined />}
       nextIcon={<RightOutlined />}
       superNextIcon={<RightDoubleOutlined />}
     />
   );
-}
+};
+
+DatePicker.displayName = 'DatePicker';
 
 export default DatePicker;

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

@@ -126,9 +126,12 @@
   &-cell {
     box-sizing: border-box;
     padding: 4px 0;
-    cursor: pointer;
 
-    &::before {
+    &:not(&-disabled) {
+      cursor: pointer;
+    }
+
+    &:not(&-disabled)::before {
       position: absolute;
       right: 0;
       left: 0;
@@ -184,7 +187,7 @@
       background: @blue-3;
     }
 
-    &-disabled {
+    &-in-view&-disabled {
       color: @gray-3;
       cursor: not-allowed;