diff --git a/packages/drip-form-theme-antd/src/TimePickerField/index.tsx b/packages/drip-form-theme-antd/src/TimePickerField/index.tsx
index 1aec632e..061beb84 100644
--- a/packages/drip-form-theme-antd/src/TimePickerField/index.tsx
+++ b/packages/drip-form-theme-antd/src/TimePickerField/index.tsx
@@ -48,8 +48,8 @@ const TimePickerField: FC<TimePickerFieldProps> = ({
       onChange,
       asyncValidate,
       options: {
-        isMoment: use12Hours ? false : true,
-        format: range ? format : use12Hours ? 'h:mm:ss a' : 'HH:mm:ss',
+        isMoment: true,
+        format,
       },
     },
     dispatch
@@ -64,26 +64,23 @@ const TimePickerField: FC<TimePickerFieldProps> = ({
       } else {
         if (range) {
           setValid(
-            moment(fieldData[0], 'HH:mm:ss').isValid() &&
-              moment(fieldData[1], 'HH:mm:ss').isValid()
+            moment(fieldData[0], format).isValid() &&
+              moment(fieldData[1], format).isValid()
           )
         } else {
-          setValid(moment(fieldData, 'HH:mm:ss').isValid())
+          setValid(moment(fieldData, format).isValid())
         }
       }
     } catch (error) {
       setValid(false)
     }
-  }, [fieldData, range])
+  }, [fieldData, format, range])
   return range ? (
     <RangePicker
       {...(isValid
         ? {
             value: fieldData
-              ? [
-                  moment(fieldData[0], 'HH:mm:ss'),
-                  moment(fieldData[1], 'HH:mm:ss'),
-                ]
+              ? [moment(fieldData[0], format), moment(fieldData[1], format)]
               : null,
           }
         : null)}
@@ -98,7 +95,7 @@ const TimePickerField: FC<TimePickerFieldProps> = ({
       allowClear={allowClear}
       {...(isValid
         ? {
-            value: fieldData ? moment(fieldData, 'HH:mm:ss') : null,
+            value: fieldData ? moment(fieldData, format) : null,
           }
         : null)}
       disabled={disabled}
diff --git a/packages/generator/src/fields/formItem/timepicker.field.ts b/packages/generator/src/fields/formItem/timepicker.field.ts
index c111b28c..9da6da6e 100644
--- a/packages/generator/src/fields/formItem/timepicker.field.ts
+++ b/packages/generator/src/fields/formItem/timepicker.field.ts
@@ -1,4 +1,45 @@
 import { Field } from '../types'
+import { OnChange } from '@jdfed/utils'
+
+const changeUse12Hours: OnChange = ({ dispatch, val, getKey }) => {
+  dispatch({
+    type: 'setUi',
+    action: {
+      set: {
+        [getKey('ui.default', 'uiSchema') + '.use12Hours']: val,
+        [getKey('ui.default', 'uiSchema') + '.format']: val
+          ? 'h:mm:ss a'
+          : 'HH:mm:ss',
+        [getKey('ui.default__range.0', 'uiSchema') + '.use12Hours']: val,
+        [getKey('ui.default__range.1', 'uiSchema') + '.use12Hours']: val,
+        [getKey('ui.default__range.0', 'uiSchema') + '.format']: val
+          ? 'h:mm:ss a'
+          : 'HH:mm:ss',
+        [getKey('ui.default__range.1', 'uiSchema') + '.format']: val
+          ? 'h:mm:ss a'
+          : 'HH:mm:ss',
+      },
+    },
+  })
+  dispatch({
+    type: 'setValidate',
+    action: {
+      set: {
+        [getKey('ui.default', 'dataSchema') + '.default']: '',
+      },
+    },
+  })
+  dispatch({
+    type: 'setData',
+    action: {
+      set: {
+        'ui.default': '',
+        'ui.default__range': [],
+        'ui.format': val ? 'h:mm:ss a' : 'HH:mm:ss',
+      },
+    },
+  })
+}
 
 /**
  * 时间选择器
@@ -41,7 +82,7 @@ const config: Field = {
         type: 'boolean',
         title: '是否采用12小时制',
         default: false,
-        ui: { type: 'switch' },
+        ui: { type: 'switch', onChange: changeUse12Hours },
       },
       {
         fieldKey: 'showNow',
@@ -106,8 +147,7 @@ const config: Field = {
         type: 'string',
         title: '默认值',
         ui: {
-          type: 'text',
-          placeholder: '11:11:11',
+          type: 'timePicker',
           vcontrol: 'return !props.formData.ui.range',
         },
       },
@@ -128,16 +168,14 @@ const config: Field = {
             type: 'string',
             title: '起始时间',
             ui: {
-              type: 'text',
-              placeholder: '11:11:11',
+              type: 'timePicker',
             },
           },
           {
             type: 'string',
             title: '终止时间',
             ui: {
-              type: 'text',
-              placeholder: '12:12:12',
+              type: 'timePicker',
             },
           },
         ],