diff --git a/components.js b/components.js
index ca5e12aef..c61f4d63a 100644
--- a/components.js
+++ b/components.js
@@ -51,4 +51,5 @@ module.exports = [
   'checkbox-group',
   'radio',
   'radio-group',
+  'datetime-picker',
 ];
diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md
index 4a811ff48..1e31580db 100644
--- a/docs/markdown/changelog-v3.zh-CN.md
+++ b/docs/markdown/changelog-v3.zh-CN.md
@@ -36,6 +36,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 - Checkbox
 - CheckboxGroup
+- DatetimePicker
 - Field
 - Radio
 - RadioGroup
diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js
index 6ee4ac6cd..71ef963c5 100644
--- a/src/datetime-picker/DatePicker.js
+++ b/src/datetime-picker/DatePicker.js
@@ -28,12 +28,14 @@ export default createComponent({
     },
   },
 
+  emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
+
   watch: {
     filter: 'updateInnerValue',
     minDate: 'updateInnerValue',
     maxDate: 'updateInnerValue',
 
-    value(val) {
+    modelValue(val) {
       val = this.formatValue(val);
 
       if (val.valueOf() !== this.innerValue.valueOf()) {
diff --git a/src/datetime-picker/TimePicker.js b/src/datetime-picker/TimePicker.js
index a283ac810..25db47844 100644
--- a/src/datetime-picker/TimePicker.js
+++ b/src/datetime-picker/TimePicker.js
@@ -28,6 +28,8 @@ export default createComponent({
     },
   },
 
+  emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
+
   computed: {
     ranges() {
       return [
diff --git a/src/datetime-picker/index.js b/src/datetime-picker/index.js
index 50a0c3080..7f0b7f561 100644
--- a/src/datetime-picker/index.js
+++ b/src/datetime-picker/index.js
@@ -19,16 +19,6 @@ export default createComponent({
 
   render() {
     const Component = this.type === 'time' ? TimePicker : DatePicker;
-
-    return (
-      <Component
-        ref="root"
-        class={bem()}
-        {...{
-          props: this.$props,
-          on: this.$listeners,
-        }}
-      />
-    );
+    return <Component ref="root" class={bem()} {...this.$props} />;
   },
 });
diff --git a/src/datetime-picker/shared.js b/src/datetime-picker/shared.js
index 45ad4a273..051db9d2d 100644
--- a/src/datetime-picker/shared.js
+++ b/src/datetime-picker/shared.js
@@ -5,8 +5,8 @@ import Picker from '../picker';
 
 export const sharedProps = {
   ...pickerProps,
-  value: null,
   filter: Function,
+  modelValue: null,
   showToolbar: {
     type: Boolean,
     default: true,
@@ -21,7 +21,7 @@ export const sharedProps = {
 export const TimePickerMixin = {
   data() {
     return {
-      innerValue: this.formatValue(this.value),
+      innerValue: this.formatValue(this.modelValue),
     };
   },
 
@@ -57,7 +57,7 @@ export const TimePickerMixin = {
     columns: 'updateColumnValue',
 
     innerValue(val) {
-      this.$emit('input', val);
+      this.$emit('update:modelValue', val);
     },
   },
 
@@ -97,7 +97,7 @@ export const TimePickerMixin = {
         onChange={this.onChange}
         onConfirm={this.onConfirm}
         onCancel={this.onCancel}
-        {...{ props }}
+        {...props}
       />
     );
   },
diff --git a/vant.config.js b/vant.config.js
index fff4e2bad..c82b4a057 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -123,10 +123,10 @@ module.exports = {
                 path: 'checkbox',
                 title: 'Checkbox 复选框',
               },
-              // {
-              //   path: 'datetime-picker',
-              //   title: 'DatetimePicker 时间选择',
-              // },
+              {
+                path: 'datetime-picker',
+                title: 'DatetimePicker 时间选择',
+              },
               {
                 path: 'field',
                 title: 'Field 输入框',
@@ -457,10 +457,10 @@ module.exports = {
                 path: 'checkbox',
                 title: 'Checkbox',
               },
-              // {
-              //   path: 'datetime-picker',
-              //   title: 'DatetimePicker',
-              // },
+              {
+                path: 'datetime-picker',
+                title: 'DatetimePicker',
+              },
               {
                 path: 'field',
                 title: 'Field',