fix(date-picker): picker support timezone (#2104)

Co-authored-by: YanHui <[email protected]>

src/static-date-picker/StaticDatePicker.tsx

@@ -4,6 +4,7 @@ import { ArrowsLeftOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowsRightO
 import PickerPanel from 'rc-picker/lib/PickerPanel';
 import generateDateFns from 'rc-picker/lib/generate/dateFns';
 import { Locale, PickerMode } from 'rc-picker/lib/interface';
+import { exportDateToZonedDate } from '../utils/timeHelper';
 import defaultLocale from './locales/zh-CN';
 import { StaticDatePickerProps } from './interfaces';
 
@@ -81,7 +82,7 @@ const StaticDatePicker: React.FC<StaticDatePickerProps> = ({
       {...restProps}
       pickerValue={viewDate}
       onSelect={(date) => {
-        onSelect?.(date);
+        onSelect?.(exportDateToZonedDate(date, 'yyyy-MM-DD'));
       }}
       onChange={(date) => {
         setViewDate(date, true);

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

@@ -8,6 +8,7 @@ import isBefore from 'date-fns/isBefore';
 import StaticDatePicker, { StaticDatePickerContext } from '../static-date-picker';
 import { StaticDateRangePickerProps } from './interfaces';
 import { getDefaultViewDates, calcClosingViewDate, mergeDates } from './utils';
+import { exportDateToZonedDate } from '../utils/timeHelper';
 
 function StaticDateRangePicker({
   className,
@@ -86,7 +87,7 @@ function StaticDateRangePicker({
         },
         onSelect: (currentValue) => {
           const newValue = mergeDates(selectedValue, currentValue, dateIndex);
-          onSelect?.(newValue as [Date, Date], dateIndex);
+          onSelect?.(newValue?.map((date) => exportDateToZonedDate(date, 'yyyy-MM-DD')) as [Date, Date], dateIndex);
           setSelectedValue(newValue, true);
           setDateIndex(1 - dateIndex);
         },

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

@@ -1,12 +1,13 @@
 import React from 'react';
-import { getTime, isValid, isAfter, startOfToday, subMonths, endOfDay, startOfDay } from 'date-fns';
+import { getTime, isValid, isAfter, startOfToday, subMonths, startOfDay } from 'date-fns';
 import { usePrefixCls, useLocale } from '@gio-design/utils';
 import { formatDates } from '../date-range-picker/index';
 import StaticDateRangePicker from '../static-date-range-picker/index';
 import InnerRangePanel from './InnerRangePanel';
 import { RangePickerProps } from './interfaces';
 import { parseStartAndEndDate } from './utils';
 import defaultLocale from './locales/zh-CN';
+import { exportDateToZonedDate } from '../utils/timeHelper';
 
 function AbsoluteRangePicker({ disabledDate, timeRange, onSelect, onRangeSelect, onCancel }: RangePickerProps) {
   const [dates, setDates] = React.useState<[Date | undefined, Date | undefined]>(parseStartAndEndDate(timeRange));
@@ -28,12 +29,16 @@ function AbsoluteRangePicker({ disabledDate, timeRange, onSelect, onRangeSelect,
   };
   const handleDisabledDate = (current: Date) => disabledDate?.(current) || isAfter(current, startOfToday());
   const handleOnOK = () => {
-    onSelect(`abs:${getTime(startOfDay(dates[0] as Date))},${getTime(endOfDay(dates[1] as Date))}`);
+    onSelect(
+      `abs:${getTime(exportDateToZonedDate(dates[0] as Date))},${
+        getTime(exportDateToZonedDate(dates[1] as Date)) + 86399999
+      }`
+    );
   };
   const handleOnSelect = (date: [Date, Date], index: number) => {
     setDates(date);
     onRangeSelect?.(date, index);
-  }
+  };
   const endDay = dates[1] !== undefined && isValid(dates[1]) ? dates[1] : new Date();
   return (
     <InnerRangePanel

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { getTime, startOfToday, startOfYesterday, startOfDay, isValid, isAfter } from 'date-fns';
+import { getTime, startOfToday, startOfYesterday, isValid, isAfter } from 'date-fns';
 import { usePrefixCls, useLocale } from '@gio-design/utils';
-import { parseFnsTimeZone } from '../utils/timeHelper';
+import { parseFnsTimeZone, exportDateToZonedDate } from '../utils/timeHelper';
 import Switch from '../switch';
 import DatePicker from '../static-date-picker';
 import InnerRangePanel from './InnerRangePanel';
@@ -60,7 +60,7 @@ function SinceRangePicker({ disabledDate, timeRange, onSelect, onCancel, experim
     disabledDate?.(current) || isAfter(current, endKey === 'yesterday' ? startOfYesterday() : startOfToday());
 
   const handleOnOK = () => {
-    onSelect(`${endKey === 'yesterday' ? 'since-lt-today' : 'since'}:${getTime(startOfDay(startDate as Date))}`);
+    onSelect(`${endKey === 'yesterday' ? 'since-lt-today' : 'since'}:${getTime(exportDateToZonedDate(startDate))}`);
   };
   return (
     <InnerRangePanel

src/utils/timeHelper.ts

@@ -1,18 +1,30 @@
 import { isNumber } from 'lodash';
-import moment from 'moment-timezone';
+import momentTZ from 'moment-timezone';
+import moment from 'moment';
 import { format as dateFnsFormat } from 'date-fns-tz';
 
 // 时间日期转换时区 moment
 export const parseTimeZone = (data?: any, format?: string) =>
-  moment(data as string, format).tz(localStorage.getItem('timezone') || 'UTC');
+  momentTZ(data as string, format).tz(localStorage.getItem('timezone') || 'UTC');
 
 // 时间日期转换时区 date-fns
 export const parseFnsTimeZone = (date: number | Date | string, format: string) => {
   let finalDate = date;
   if (isNumber(date)) {
     finalDate = new Date(date);
   }
+
   return dateFnsFormat(finalDate, format, {
     timeZone: localStorage.getItem('timezone') || 'UTC',
   });
 };
+
+// 选择器时间按时区转化
+// 例: date: Fri Oct 21 2022 09:00:00 GMT+0800 (中国标准时间) format: 'yyyy-MM-DD';
+// return
+export const exportDateToZonedDate = (date: any, format?: string) => {
+  if (!date) return date;
+  return new Date(
+    momentTZ.tz(moment(date).format(format || 'yyyy-MM-DD'), localStorage.getItem('timezone') || 'UTC').format()
+  );
+};