@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.11

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/index.tsx

@@ -112,6 +112,11 @@ export class SubTableFieldModel extends AssociationFieldModel {
     };
     const isConfigMode = !!this.context.flowSettingsEnabled;
     const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
+    const onResetFieldValue = () => {
+      const value = [];
+      this.setProps({ value });
+      this.context.blockModel?.setFieldValue?.(fieldPathArray, value);
+    };
     return (
       <SubTableField
         {...this.props}
@@ -124,6 +129,7 @@ export class SubTableFieldModel extends AssociationFieldModel {
         formValuesChangeEmitter={this.context.blockModel?.emitter}
         fieldPathArray={fieldPathArray}
         getCurrentValue={() => this.getCurrentValue()}
+        onResetFieldValue={onResetFieldValue}
       />
     );
   }
@@ -136,10 +142,6 @@ export class SubTableFieldModel extends AssociationFieldModel {
     this.context.defineProperty('collection', {
       get: () => this.context.collectionField.targetCollection,
     });
-    // 监听表单reset
-    this.context.blockModel.emitter.on('onFieldReset', () => {
-      this.props.onChange([]);
-    });
     this.onSelectExitRecordClick = (setCurrentPage, currentPageSize) => {
       this.setCurrentPage = setCurrentPage;
       this.currentPageSize = currentPageSize;

package/src/flow/models/fields/AssociationFieldModel/__tests__/AssociationFieldModel.updateAssociation.test.ts

@@ -0,0 +1,72 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { AssociationFieldModel } from '../AssociationFieldModel';
+
+class DefaultAssociationFieldModel extends AssociationFieldModel {}
+
+class UpdateAssociationFieldModel extends AssociationFieldModel {
+  updateAssociation = true;
+}
+
+async function runAssociationFieldInit(FieldModelClass: typeof AssociationFieldModel) {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    DefaultAssociationFieldModel,
+    UpdateAssociationFieldModel,
+  });
+
+  const addUpdateAssociationValues = vi.fn();
+  const blockModel = engine.createModel<FlowModel>({
+    use: 'FlowModel',
+    uid: 'form-block',
+  });
+  blockModel.context.defineProperty('resource', {
+    value: { addUpdateAssociationValues },
+  });
+
+  const formItem = engine.createModel<FlowModel>({
+    use: 'FlowModel',
+    uid: 'form-item',
+  });
+  (formItem as FlowModel & { fieldPath: string }).fieldPath = 'author';
+  formItem.context.defineProperty('blockModel', { value: blockModel });
+
+  const field = engine.createModel<AssociationFieldModel>({
+    use: FieldModelClass,
+    uid: 'association-field',
+    parentId: formItem.uid,
+  });
+  field.context.defineProperty('collectionField', {
+    value: {
+      dataSourceKey: 'main',
+      target: 'users',
+    },
+  });
+
+  await field.applyFlow('AssociationFieldInit');
+
+  return addUpdateAssociationValues;
+}
+
+describe('AssociationFieldModel updateAssociation', () => {
+  it('does not add updateAssociationValues by default', async () => {
+    const addUpdateAssociationValues = await runAssociationFieldInit(DefaultAssociationFieldModel);
+
+    expect(addUpdateAssociationValues).not.toHaveBeenCalled();
+  });
+
+  it('adds updateAssociationValues for opt-in association fields', async () => {
+    const addUpdateAssociationValues = await runAssociationFieldInit(UpdateAssociationFieldModel);
+
+    expect(addUpdateAssociationValues).toHaveBeenCalledWith('author');
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -28,6 +28,7 @@ import {
   normalizeRecordPickerValue,
   shouldClearRecordPickerValueOnMultipleChange,
 } from '../RecordPickerFieldModel';
+import { getAssociationHydrationNamePath, getAssociationHydrationSetterContext } from '../RecordSelectFieldModel';
 
 function createMockCollection() {
   return {
@@ -93,6 +94,28 @@ describe('RecordPickerFieldModel item context', () => {
     expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsTo' }, true, false)).toBe(false);
   });
 
+  it('uses the current field context for association hydration writes', () => {
+    const setFormValue = vi.fn();
+    const blockSetFormValue = vi.fn();
+    const model = {
+      props: {
+        name: 'orders',
+      },
+      context: {
+        fieldPathArray: ['orders', 0, 'lines', 1, 'product'],
+        setFormValue,
+        blockModel: {
+          context: {
+            setFormValue: blockSetFormValue,
+          },
+        },
+      },
+    };
+
+    expect(getAssociationHydrationNamePath(model)).toEqual(['orders', 0, 'lines', 1, 'product']);
+    expect(getAssociationHydrationSetterContext(model)).toBe(model.context);
+  });
+
   it('itemChain helpers: createParentItemAccessorsFromInputArgs works', () => {
     const inputArgs = {
       parentItem: { value: { id: 1 } },

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -197,6 +197,11 @@ export class ClickableFieldModel extends FieldModel {
       titleField,
       overflowMode,
       disabled,
+      dateOnly,
+      dateFormat,
+      format,
+      picker,
+      showTime,
       timeFormat,
       ...restProps
     } = this.props;

package/src/flow/models/fields/DateTimeFieldModel/__tests__/DateTimeNoTzFieldModel.dateLimit.test.tsx

@@ -17,6 +17,8 @@ import { DateTimeNoTzPicker } from '../DateTimeNoTzFieldModel';
 let capturedDatePickerProps: any;
 let currentForm: any;
 const mockResolveJsonTemplate = vi.fn();
+const mockRunjs = vi.fn();
+const mockLoggerWarn = vi.fn();
 
 vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
@@ -32,6 +34,10 @@ vi.mock('@nocobase/flow-engine', async (importOriginal) => {
     }),
     useFlowContext: () => ({
       resolveJsonTemplate: mockResolveJsonTemplate,
+      runjs: mockRunjs,
+      logger: {
+        warn: mockLoggerWarn,
+      },
     }),
   };
 });
@@ -64,6 +70,9 @@ describe('DateTimeNoTzPicker date range limit', () => {
     currentForm = undefined;
     capturedDatePickerProps = undefined;
     mockResolveJsonTemplate.mockReset();
+    mockRunjs.mockReset();
+    mockLoggerWarn.mockReset();
+    mockRunjs.mockResolvedValue({ success: true, value: undefined });
     mockResolveJsonTemplate.mockImplementation(async (params) => ({
       ...params,
       _maxDate: currentForm?.getFieldValue?.('b'),
@@ -239,4 +248,144 @@ describe('DateTimeNoTzPicker date range limit', () => {
     expect(timeConfig?.disabledMinutes?.(12)).toEqual([]);
     expect(timeConfig?.disabledSeconds?.(12, 34)).toEqual([]);
   });
+
+  it('evaluates RunJS before applying minDate', async () => {
+    const code = 'return new Date("2026-05-10T08:09:10.000Z").toISOString();';
+    mockRunjs.mockResolvedValue({ success: true, value: '2026-05-10T08:09:10.000Z' });
+    mockResolveJsonTemplate.mockImplementation(async (params) => params);
+
+    render(<TestWrapper picker="date" showTime _minDate={{ code, version: 'v2' }} onChange={vi.fn()} value={null} />);
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-10 00:00:00'))).toBe(false);
+    });
+
+    expect(mockRunjs.mock.calls[0]?.[0]).toBe(code);
+    expect(mockRunjs.mock.calls[0]?.[2]).toEqual({ version: 'v2' });
+    expect(mockResolveJsonTemplate).toHaveBeenCalledWith({
+      _minDate: '2026-05-10T08:09:10.000Z',
+      _maxDate: undefined,
+    });
+  });
+
+  it('supports a RunJS minDate together with a variable maxDate', async () => {
+    mockRunjs.mockResolvedValue({ success: true, value: '2026-05-10 08:00:00' });
+    mockResolveJsonTemplate.mockImplementation(async (params) => ({
+      ...params,
+      _maxDate: '2026-05-12 18:30:40',
+    }));
+
+    render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={{ code: 'return "2026-05-10 08:00:00";', version: 'v2' }}
+        _maxDate={'{{ $nForm.max }}'}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-13 00:00:00'))).toBe(true);
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-11 00:00:00'))).toBe(false);
+  });
+
+  it('clears stale restrictions when RunJS execution fails', async () => {
+    mockResolveJsonTemplate.mockImplementation(async (params) => params);
+    mockRunjs.mockImplementation(async (code) => {
+      if (code === 'throw new Error("failed");') {
+        return { success: false, error: new Error('failed') };
+      }
+      return { success: true, value: '2026-05-10 08:00:00' };
+    });
+
+    const view = render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={{ code: 'return "2026-05-10 08:00:00";', version: 'v2' }}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-09 00:00:00'))).toBe(true);
+    });
+
+    view.rerender(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={{ code: 'throw new Error("failed");', version: 'v2' }}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockLoggerWarn).toHaveBeenCalled();
+      expect(capturedDatePickerProps?.minDate).toBeNull();
+      expect(capturedDatePickerProps?.disabledDate).toBeNull();
+      expect(capturedDatePickerProps?.disabledTime).toBeNull();
+    });
+  });
+
+  it('keeps the latest RunJS result when an earlier execution finishes later', async () => {
+    const slowResolvers: Array<(result: { success: boolean; value: string }) => void> = [];
+    mockResolveJsonTemplate.mockImplementation(async (params) => params);
+    mockRunjs.mockImplementation((code) => {
+      if (code === 'return "slow";') {
+        return new Promise((resolve) => {
+          slowResolvers.push(resolve);
+        });
+      }
+      return Promise.resolve({ success: true, value: '2026-06-01 00:00:00' });
+    });
+
+    const view = render(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={{ code: 'return "slow";', version: 'v2' }}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(slowResolvers.length).toBeGreaterThan(0);
+    });
+
+    view.rerender(
+      <TestWrapper
+        picker="date"
+        showTime
+        _minDate={{ code: 'return "fast";', version: 'v2' }}
+        onChange={vi.fn()}
+        value={null}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-05-31 00:00:00'))).toBe(true);
+      expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-07-01 00:00:00'))).toBe(false);
+    });
+
+    slowResolvers.forEach((resolve) => resolve({ success: true, value: '2026-12-01 00:00:00' }));
+
+    await waitFor(() => {
+      expect(mockResolveJsonTemplate).toHaveBeenCalledWith({
+        _minDate: '2026-12-01 00:00:00',
+        _maxDate: undefined,
+      });
+    });
+
+    expect(capturedDatePickerProps?.disabledDate?.(dayjs('2026-07-01 00:00:00'))).toBe(false);
+  });
 });

package/src/flow/models/fields/DateTimeFieldModel/dateLimit.ts

@@ -8,140 +8,176 @@
  */
 
 import { autorun } from '@formily/reactive';
-import { Form } from 'antd';
-import { useFlowContext } from '@nocobase/flow-engine';
+import { Form, type FormInstance } from 'antd';
+import { resolveRunJSObjectValues, useFlowContext } from '@nocobase/flow-engine';
 import { dayjs } from '@nocobase/utils/client';
+import type { ConfigType, Dayjs } from 'dayjs';
 import { first, last } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 type DateLimitProps = {
-  _minDate?: any;
-  _maxDate?: any;
-  currentForm?: any;
+  _minDate?: unknown;
+  _maxDate?: unknown;
+  currentForm?: unknown;
 };
 
-export function useDateLimit(props: DateLimitProps) {
-  const ctx = useFlowContext();
-  const isAntdFormInstance = typeof props.currentForm?.getFieldsValue === 'function';
-  const currentFormValues = Form.useWatch([], isAntdFormInstance ? props.currentForm : undefined);
-  const [minDate, setMinDate] = useState<dayjs.Dayjs | null>(null);
-  const [maxDate, setMaxDate] = useState<dayjs.Dayjs | null>(null);
-  const [disabledDate, setDisabledDate] = useState<any>(null);
-  const [disabledTime, setDisabledTime] = useState<any>(null);
-  const disposeRef = useRef<any>(null);
+type DisabledTimeConfig = {
+  disabledHours: () => number[];
+  disabledMinutes: (selectedHour: number) => number[];
+  disabledSeconds: (selectedHour: number, selectedMinute: number) => number[];
+};
 
-  useEffect(() => {
-    if (disposeRef.current) {
-      disposeRef.current();
-    }
+type DisabledDate = (current: Dayjs) => boolean;
+type DisabledTime = (current: Dayjs | null) => DisabledTimeConfig;
 
-    disposeRef.current = autorun(() => {
-      void limitDate();
-    });
+function isAntdFormInstance(value: unknown): value is FormInstance {
+  if (!value || typeof value !== 'object') return false;
+  return typeof (value as Partial<FormInstance>).getFieldsValue === 'function';
+}
 
-    return () => {
-      disposeRef.current?.();
-    };
-  }, [ctx, currentFormValues, props._maxDate, props._minDate]);
+function parseDateLimitValue(value: unknown): Dayjs | null {
+  if (!value) return null;
+  const parsed = dayjs(value as ConfigType);
+  return parsed.isValid() ? parsed : null;
+}
 
-  const limitDate = async () => {
-    const resolvedParams = await ctx.resolveJsonTemplate({
-      _minDate: props._minDate,
-      _maxDate: props._maxDate,
-    });
+export function useDateLimit(props: DateLimitProps) {
+  const ctx = useFlowContext();
+  const currentForm = isAntdFormInstance(props.currentForm) ? props.currentForm : undefined;
+  const currentFormValues = Form.useWatch([], currentForm);
+  const [minDate, setMinDate] = useState<Dayjs | null>(null);
+  const [maxDate, setMaxDate] = useState<Dayjs | null>(null);
+  const [disabledDate, setDisabledDate] = useState<DisabledDate | null>(null);
+  const [disabledTime, setDisabledTime] = useState<DisabledTime | null>(null);
+  const evaluationIdRef = useRef(0);
+
+  const limitDate = useCallback(async () => {
+    const evaluationId = ++evaluationIdRef.current;
+
+    try {
+      const runJSResolvedParams = await resolveRunJSObjectValues(ctx, {
+        _minDate: props._minDate,
+        _maxDate: props._maxDate,
+      });
+      const resolvedParams = (await ctx.resolveJsonTemplate({
+        _minDate: runJSResolvedParams._minDate,
+        _maxDate: runJSResolvedParams._maxDate,
+      })) as { _minDate?: unknown; _maxDate?: unknown };
+
+      if (evaluationId !== evaluationIdRef.current) return;
+
+      const nextMinRaw = Array.isArray(resolvedParams?._minDate)
+        ? first(resolvedParams._minDate)
+        : resolvedParams?._minDate;
+      const nextMaxRaw = Array.isArray(resolvedParams?._maxDate)
+        ? last(resolvedParams._maxDate)
+        : resolvedParams?._maxDate;
+      const nextMinDate = parseDateLimitValue(nextMinRaw);
+      const nextMaxDate = parseDateLimitValue(nextMaxRaw);
+
+      setMinDate(nextMinDate);
+      setMaxDate(nextMaxDate);
+
+      const fullTimeArr = Array.from({ length: 60 }, (_, i) => i);
+
+      const nextDisabledDate: DisabledDate = (current) => {
+        if (!dayjs.isDayjs(current)) return false;
+
+        const min = nextMinDate?.startOf('day') || null;
+        const max = nextMaxDate?.endOf('day') || null;
+
+        if (min && current.startOf('day').isBefore(min)) {
+          return true;
+        }
+        if (max && current.startOf('day').isAfter(max)) {
+          return true;
+        }
+        return false;
+      };
 
-    const nextMinRaw = Array.isArray(resolvedParams?._minDate)
-      ? first(resolvedParams._minDate)
-      : resolvedParams?._minDate;
-    const nextMaxRaw = Array.isArray(resolvedParams?._maxDate)
-      ? last(resolvedParams._maxDate)
-      : resolvedParams?._maxDate;
-    const nextMinDate = nextMinRaw ? dayjs(nextMinRaw) : null;
-    const nextMaxDate = nextMaxRaw ? dayjs(nextMaxRaw) : null;
-
-    setMinDate(nextMinDate?.isValid?.() ? nextMinDate : null);
-    setMaxDate(nextMaxDate?.isValid?.() ? nextMaxDate : null);
-
-    const fullTimeArr = Array.from({ length: 60 }, (_, i) => i);
-
-    const nextDisabledDate = (current: dayjs.Dayjs) => {
-      if (!dayjs.isDayjs(current)) return false;
-
-      const min = nextMinDate?.isValid?.() ? nextMinDate.startOf('day') : null;
-      const max = nextMaxDate?.isValid?.() ? nextMaxDate.endOf('day') : null;
-
-      if (min && current.startOf('day').isBefore(min)) {
-        return true;
-      }
-      if (max && current.startOf('day').isAfter(max)) {
-        return true;
-      }
-      return false;
-    };
+      const nextDisabledTime: DisabledTime = (current) => {
+        if (!current || (!nextMinDate && !nextMaxDate)) {
+          return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
+        }
 
-    const nextDisabledTime = (current: dayjs.Dayjs) => {
-      if (!current || (!nextMinDate?.isValid?.() && !nextMaxDate?.isValid?.())) {
-        return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
-      }
+        const isCurrentMinDay = !!nextMinDate && current.isSame(nextMinDate, 'day');
+        const isCurrentMaxDay = !!nextMaxDate && current.isSame(nextMaxDate, 'day');
 
-      const isCurrentMinDay = !!nextMinDate?.isValid?.() && current.isSame(nextMinDate, 'day');
-      const isCurrentMaxDay = !!nextMaxDate?.isValid?.() && current.isSame(nextMaxDate, 'day');
+        const disabledHours = () => {
+          const hours = [];
+          if (isCurrentMinDay && nextMinDate) {
+            for (let hour = 0; hour < nextMinDate.hour(); hour++) {
+              hours.push(hour);
+            }
+          }
+          if (isCurrentMaxDay && nextMaxDate) {
+            for (let hour = nextMaxDate.hour() + 1; hour < 24; hour++) {
+              hours.push(hour);
+            }
+          }
+          return hours;
+        };
 
-      const disabledHours = () => {
-        const hours = [];
-        if (isCurrentMinDay && nextMinDate) {
-          for (let hour = 0; hour < nextMinDate.hour(); hour++) {
-            hours.push(hour);
+        const disabledMinutes = (selectedHour: number) => {
+          if (isCurrentMinDay && nextMinDate && selectedHour === nextMinDate.hour()) {
+            return fullTimeArr.filter((minute) => minute < nextMinDate.minute());
           }
-        }
-        if (isCurrentMaxDay && nextMaxDate) {
-          for (let hour = nextMaxDate.hour() + 1; hour < 24; hour++) {
-            hours.push(hour);
+          if (isCurrentMaxDay && nextMaxDate && selectedHour === nextMaxDate.hour()) {
+            return fullTimeArr.filter((minute) => minute > nextMaxDate.minute());
           }
-        }
-        return hours;
+          return [];
+        };
+
+        const disabledSeconds = (selectedHour: number, selectedMinute: number) => {
+          if (
+            isCurrentMinDay &&
+            nextMinDate &&
+            selectedHour === nextMinDate.hour() &&
+            selectedMinute === nextMinDate.minute()
+          ) {
+            return fullTimeArr.filter((second) => second < nextMinDate.second());
+          }
+          if (
+            isCurrentMaxDay &&
+            nextMaxDate &&
+            selectedHour === nextMaxDate.hour() &&
+            selectedMinute === nextMaxDate.minute()
+          ) {
+            return fullTimeArr.filter((second) => second > nextMaxDate.second());
+          }
+          return [];
+        };
+
+        return {
+          disabledHours,
+          disabledMinutes,
+          disabledSeconds,
+        };
       };
 
-      const disabledMinutes = (selectedHour: number) => {
-        if (isCurrentMinDay && nextMinDate && selectedHour === nextMinDate.hour()) {
-          return fullTimeArr.filter((minute) => minute < nextMinDate.minute());
-        }
-        if (isCurrentMaxDay && nextMaxDate && selectedHour === nextMaxDate.hour()) {
-          return fullTimeArr.filter((minute) => minute > nextMaxDate.minute());
-        }
-        return [];
-      };
+      setDisabledDate(() => nextDisabledDate);
+      setDisabledTime(() => nextDisabledTime);
+    } catch (error) {
+      if (evaluationId !== evaluationIdRef.current) return;
 
-      const disabledSeconds = (selectedHour: number, selectedMinute: number) => {
-        if (
-          isCurrentMinDay &&
-          nextMinDate &&
-          selectedHour === nextMinDate.hour() &&
-          selectedMinute === nextMinDate.minute()
-        ) {
-          return fullTimeArr.filter((second) => second < nextMinDate.second());
-        }
-        if (
-          isCurrentMaxDay &&
-          nextMaxDate &&
-          selectedHour === nextMaxDate.hour() &&
-          selectedMinute === nextMaxDate.minute()
-        ) {
-          return fullTimeArr.filter((second) => second > nextMaxDate.second());
-        }
-        return [];
-      };
+      ctx.logger?.warn?.({ err: error }, 'Failed to resolve date range limit');
+      setMinDate(null);
+      setMaxDate(null);
+      setDisabledDate(null);
+      setDisabledTime(null);
+    }
+  }, [ctx, props._maxDate, props._minDate]);
 
-      return {
-        disabledHours,
-        disabledMinutes,
-        disabledSeconds,
-      };
-    };
+  useEffect(() => {
+    const dispose = autorun(() => {
+      limitDate();
+    });
 
-    setDisabledDate(() => nextDisabledDate);
-    setDisabledTime(() => nextDisabledTime);
-  };
+    return () => {
+      evaluationIdRef.current += 1;
+      dispose();
+    };
+  }, [currentFormValues, limitDate]);
 
   return {
     minDate,

package/src/flow/models/fields/DisplayDateTimeFieldModel.tsx

@@ -8,14 +8,42 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
 import dayjs from 'dayjs';
 import React from 'react';
 import { ClickableFieldModel } from './ClickableFieldModel';
 
+const stripTimeFromFormat = (format?: string) =>
+  format ? format.replace(/\s*[Hh]{1,2}:mm(?::ss)?(?:\.SSS)?(?:\s*[aA])?/g, '').trim() : format;
+
+interface DisplayDateTimeFormatProps {
+  dateOnly?: boolean;
+  picker?: string;
+  format?: string;
+  dateFormat?: string;
+  showTime?: boolean;
+  timeFormat?: string;
+}
+
+const resolveDisplayDateTimeFormat = (props: DisplayDateTimeFormatProps) => {
+  const { dateOnly, picker = 'date', format, dateFormat, showTime, timeFormat } = props;
+  const normalizedFormat = stripTimeFromFormat(format);
+  if (picker !== 'date') {
+    return dateFormat || normalizedFormat || getPickerFormat(picker);
+  }
+
+  if (!dateOnly && !dateFormat && typeof showTime === 'undefined' && !timeFormat && normalizedFormat) {
+    return format;
+  }
+
+  const normalizedDateFormat = dateFormat || normalizedFormat || getPickerFormat(picker);
+  return getDateTimeFormat(picker, normalizedDateFormat, showTime, timeFormat);
+};
+
 export class DisplayDateTimeFieldModel extends ClickableFieldModel {
   public renderComponent(value) {
     const { className, style } = this.props;
-    const finalFormat = this.props.format;
+    const finalFormat = resolveDisplayDateTimeFormat(this.props);
     let formattedValue = '';
     if (value) {
       const day = dayjs(value);