fix: 修复时间选择组件配置utc后交互异常问题 Close:#10122 (#10332)

* fix: 修复时间选择组件配置utc后交互异常问题

* fix: 修复range类组件utc时间问题

* bugfix

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

docs/zh-CN/components/form/input-datetime.md

@@ -343,14 +343,14 @@ order: 14
             "type": "input-datetime",
             "name": "datetime",
             "label": "普通日期时间",
-            "format": "YYYY-MM-DD"
+            "format": "YYYY-MM-DD HH:mm:ss"
         },
         {
             "type": "input-datetime",
             "name": "datetime-utc",
             "label": "UTC日期时间",
             "utc": true,
-            "format": "YYYY-MM-DD"
+            "format": "YYYY-MM-DD HH:mm:ss"
         }
     ]
 }

packages/amis-core/src/utils/date.ts

@@ -71,8 +71,12 @@ export const filterDate = (
     const date = new Date();
     return mm([date.getFullYear(), date.getMonth(), date.getDate()]);
   } else {
-    const result = mm(value);
-    return result.isValid() ? result : mm(value, format);
+    const result = utc ? mm(value).local() : mm(value);
+    return result.isValid()
+      ? result
+      : utc
+      ? mm(value, format).local()
+      : mm(value, format);
   }
 };
 
@@ -99,12 +103,20 @@ export function parseDuration(str: string): moment.Duration | undefined {
  * @param format
  * @returns
  */
-export function normalizeDate(value: any, format?: string) {
+export function normalizeDate(
+  value: any,
+  format?: string,
+  options?: {
+    utc?: boolean; // utc还原成本地时间
+  }
+) {
   if (!value || value === '0') {
     return undefined;
   }
 
-  const v = moment(value, format, true);
+  const v = options?.utc
+    ? moment.utc(value, format).local()
+    : moment(value, format, true);
   if (v.isValid()) {
     return v;
   }

packages/amis-ui/src/components/DatePicker.tsx

@@ -485,7 +485,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
 
     if (prevValue !== props.value) {
       const newState: any = {
-        value: normalizeDate(props.value, props.valueFormat || props.format)
+        value: normalizeDate(props.value, props.valueFormat || props.format, {
+          utc: props.utc
+        })
       };
 
       newState.inputValue =
@@ -706,9 +708,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const updatedValue = utc
       ? moment.utc(value).format(valueFormat || format)
       : value.format(valueFormat || format);
-    const updatedInputValue = utc
-      ? moment.utc(value).format(displayFormat || inputFormat)
-      : value.format(displayFormat || inputFormat);
+    const updatedInputValue = value.format(displayFormat || inputFormat);
 
     if (isConfirmMode) {
       this.setState({value, inputValue: updatedInputValue});

packages/amis-ui/src/components/DateRangePicker.tsx

@@ -529,7 +529,8 @@ export class DateRangePicker extends React.Component<
     format: string,
     joinValues: boolean,
     delimiter: string,
-    data: any
+    data: any,
+    utc?: boolean
   ) {
     if (!value) {
       return {
@@ -542,8 +543,8 @@ export class DateRangePicker extends React.Component<
       value = value.split(delimiter);
     }
 
-    const startDate = filterDate(value?.[0], data, format);
-    const endDate = filterDate(value?.[1], data, format);
+    const startDate = filterDate(value?.[0], data, format, utc);
+    const endDate = filterDate(value?.[1], data, format, utc);
 
     /**
      * 不合法的value输入都丢弃
@@ -609,14 +610,16 @@ export class DateRangePicker extends React.Component<
       displayFormat,
       dateFormat,
       timeFormat,
-      data
+      data,
+      utc
     } = this.props;
     const {startDate, endDate} = DateRangePicker.unFormatValue(
       value,
       valueFormat || (format as string),
       joinValues,
       delimiter,
-      data
+      data,
+      utc
     );
 
     let curDateFormat = dateFormat ?? '';
@@ -691,7 +694,8 @@ export class DateRangePicker extends React.Component<
       dateFormat,
       timeFormat,
       delimiter,
-      data
+      data,
+      utc
     } = props;
     if (
       prevProps.displayFormat != displayFormat ||
@@ -727,7 +731,8 @@ export class DateRangePicker extends React.Component<
         valueFormat || (format as string),
         joinValues,
         delimiter,
-        data
+        data,
+        utc
       );
       this.setState({
         startDate,
@@ -818,14 +823,16 @@ export class DateRangePicker extends React.Component<
         delimiter,
         inputFormat,
         displayFormat,
-        data
+        data,
+        utc
       } = this.props;
       const {startDate, endDate} = DateRangePicker.unFormatValue(
         value,
         valueFormat || (format as string),
         joinValues,
         delimiter,
-        data
+        data,
+        utc
       );
       this.setState({
         startDate,
@@ -1455,7 +1462,8 @@ export class DateRangePicker extends React.Component<
       delimiter,
       inputFormat,
       displayFormat,
-      data
+      data,
+      utc
     } = this.props;
 
     const tmpResetValue = resetValue ?? this.props.resetValue;
@@ -1464,7 +1472,8 @@ export class DateRangePicker extends React.Component<
       valueFormat || (format as string),
       joinValues,
       delimiter,
-      data
+      data,
+      utc
     );
     onChange?.(tmpResetValue);
     this.setState({