diff --git a/packages/client/src/schemas/date-picker/index.tsx b/packages/client/src/schemas/date-picker/index.tsx
index 85ddd8195..b81f144c0 100644
--- a/packages/client/src/schemas/date-picker/index.tsx
+++ b/packages/client/src/schemas/date-picker/index.tsx
@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { connect, mapProps, mapReadPretty } from '@formily/react'
+import { connect, mapProps, mapReadPretty, useField, useFieldSchema } from '@formily/react'
 import { DatePicker as AntdDatePicker } from 'antd'
 import {
   DatePickerProps as AntdDatePickerProps,
@@ -34,6 +34,8 @@ const mapDateFormat = function () {
     return props['showTime'] ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
   }
   return (props: any) => {
+    const field = useField();
+    const fieldSchema = useFieldSchema();
     const format = props['format'] || getDefaultFormat(props)
     const onChange = props.onChange
     return {
diff --git a/packages/client/src/schemas/display/index.tsx b/packages/client/src/schemas/display/index.tsx
index 9a1f19b1b..034ed9879 100644
--- a/packages/client/src/schemas/display/index.tsx
+++ b/packages/client/src/schemas/display/index.tsx
@@ -15,6 +15,7 @@ import { Tag, Space, Popover } from 'antd'
 import cls from 'classnames'
 import { formatMomentValue, usePrefixCls } from '@formily/antd/esm/__builtins__'
 import { FullscreenOutlined } from '@ant-design/icons';
+import moment from 'moment';
 
 const PlaceholderContext = createContext<string>('N/A')
 
@@ -287,11 +288,20 @@ const Cascader: React.FC<CascaderProps> = observer((props) => {
   )
 })
 
-const DatePicker: React.FC<DatePickerProps> = (props) => {
+const DatePicker: React.FC<DatePickerProps> = (props: any) => {
   const placeholder = usePlaceholder()
   const prefixCls = usePrefixCls('description-text', props)
+  const getDefaultFormat = () => {
+    const { dateFormat, showTime, timeFormat } = props;
+    let format = dateFormat;
+    if (showTime) {
+      format += ` ${timeFormat}`;
+    }
+    return format || props.format;
+  }
   const getLabels = () => {
-    const labels = formatMomentValue(props.value, props.format, placeholder)
+    const d = moment(props.value);
+    const labels = formatMomentValue(d.isValid() ? d : null, getDefaultFormat(), placeholder)
     return isArr(labels) ? labels.join('~') : labels
   }
   return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>