diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js
index f8d8a16..543d7b9 100644
--- a/__test__/date-picker.test.js
+++ b/__test__/date-picker.test.js
@@ -300,4 +300,22 @@ describe('DatePicker', () => {
     const emitted = wrapper.emitted();
     expect(emitted.input[0][0]).toEqual([null, null]);
   });
+
+  it('feat: should close popup when click time in datetime mode', () => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'datetime',
+        timePickerOptions: {
+          start: '00:00',
+          step: '00:30',
+          end: '23:30',
+        },
+        open: true,
+        showTimePanel: true,
+      },
+    });
+    const el = wrapper.find('.mx-time-option');
+    el.trigger('click');
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
 });
diff --git a/src/date-picker.vue b/src/date-picker.vue
index 12c36bb..32b16e9 100644
--- a/src/date-picker.vue
+++ b/src/date-picker.vue
@@ -343,7 +343,8 @@ export default {
       return value;
     },
     afterEmitValue(type) {
-      if (!type || type === this.type) {
+      // this.type === 'datetime', click the time should close popup
+      if (!type || type === this.type || type === 'time') {
         this.closePopup();
       }
     },