fix(date-picker): date panel is not destroyed when it is hidden (#1864)

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

src/date-picker/Picker.tsx

@@ -51,7 +51,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
     onSelect?.(currentValue, formatDate(currentValue));
   };
 
-  const content = <StaticDatePicker onSelect={handleOnSelect} disabledDate={disabledDate} />;
+  const content = <StaticDatePicker onSelect={handleOnSelect} disabledDate={disabledDate} value={controlledValue} />;
 
   function renderTrigger() {
     if (trigger) {

src/static-date-picker/DatePicker.tsx

@@ -25,10 +25,12 @@ const OmittedCell: React.FC = () => {
 const DatePicker: React.FC<StaticDatePickerProps> = ({
   viewDate: viewDateProp,
   disabledDate: disabledDateProp,
+  value,
+  defaultValue,
   ...restProps
 }) => {
   const locale = useLocale<Locale>('DatePicker') || defaultLocale;
-  const [viewDate, setViewDate] = useControlledState(viewDateProp, new Date());
+  const [viewDate, setViewDate] = useControlledState(viewDateProp, value ?? defaultValue ?? new Date());
 
   const prefixCls = usePrefixCls('picker');
 
@@ -60,6 +62,8 @@ const DatePicker: React.FC<StaticDatePickerProps> = ({
       data-testid="static-date-picker"
       dateRender={omitOtherDate}
       disabledDate={disabledDate}
+      value={value}
+      defaultValue={defaultValue}
       {...restProps}
       pickerValue={viewDate}
       onPickerValueChange={(date) => setViewDate(date)}

src/static-date-range-picker/StaticDateRangePicker.tsx

@@ -22,11 +22,14 @@ function StaticDateRangePicker({
   locale,
   ...rest
 }: StaticDateRangePickerProps) {
-  const [viewDates, setViewDates] = React.useState<[Date, Date]>(defaultViewDates ?? getDefaultViewDates());
   const [hoveredDates, setHoveredDates] = React.useState<RangeValue<Date>>();
   const [dateIndex, setDateIndex] = React.useState<number>(0);
   // @ts-ignore
   const [selectedValue, setSelectedValue] = useControlledState<RangeValue<Date>>(value, defaultValue);
+
+  const [viewDates, setViewDates] = React.useState<[Date, Date]>(
+    defaultViewDates ?? getDefaultViewDates(selectedValue?.[0] ?? new Date())
+  );
   const prefixCls = usePrefixCls('date-range-picker');
 
   function renderPicker(position: 'left' | 'right') {

src/static-date-range-picker/utils.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { RangeValue } from 'rc-picker/lib/interface';
 import generateDateFns from 'rc-picker/lib/generate/dateFns';
 import { getClosingViewDate } from 'rc-picker/lib/utils/dateUtil';
-import { add, startOfToday } from 'date-fns';
+import { add, startOfDay } from 'date-fns';
 
-export const getDefaultViewDates = () => [startOfToday(), add(startOfToday(), { months: 1 })] as [Date, Date];
+export const getDefaultViewDates = (defaultDate: Date = new Date()) =>
+  [startOfDay(defaultDate), add(startOfDay(defaultDate), { months: 1 })] as [Date, Date];
 
 export const calcClosingViewDate = (currentDate: Date, offset?: number) =>
   getClosingViewDate(currentDate, 'date', generateDateFns, offset);