diff --git a/README.md b/README.md
index d70cae3..07b471d 100644
--- a/README.md
+++ b/README.md
@@ -276,4 +276,4 @@ But don't worry, that isn't as bad as seems, this extension already does the mos
 | auto-update-value | Boolean | When the last action in selection mode is completed, the value is updated automatically |
 
 # Donate
-If you like (and use) this App Extension, please consider becoming a Quasar [GitHub Supporter](https://donate.quasar.dev).
+If you like (and use) this App Extension, please consider becoming a Quasar [GitHub Supporter](https://donate.quasar.dev).
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d1e701f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,20 @@
+{
+  "name": "quasar-app-extension-qdatetimepicker",
+  "version": "1.0.0-rc.17",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "quasar": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.15.0.tgz",
+      "integrity": "sha512-GTIz/8AgzpHKPsbrQfO32dPPEGjDSFDWRE4dvt3AHh2LtRRAE5QJwPMqCy11GYGhyLMeZaRl76AuCUVb0BYTzA==",
+      "dev": true
+    },
+    "vue": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
+      "dev": true
+    }
+  }
+}
diff --git a/qdatetimepicker.code-workspace b/qdatetimepicker.code-workspace
new file mode 100644
index 0000000..876a149
--- /dev/null
+++ b/qdatetimepicker.code-workspace
@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}
\ No newline at end of file
diff --git a/src/component/QDatetimePicker.js b/src/component/QDatetimePicker.js
index d464e80..710895e 100644
--- a/src/component/QDatetimePicker.js
+++ b/src/component/QDatetimePicker.js
@@ -201,9 +201,9 @@ export default function ({ ssrContext }) {
         immediate: true,
         handler () {
           if (!this.value) {
-            this.standard = this.defaultStandard 
+            this.standard = this.defaultStandard
           } else {
-            let standard = this.defaultStandard 
+            let standard = this.defaultStandard
             switch (true) {
               case this.value.indexOf('-') !== -1: standard = 'iso'; break
               case this.value.indexOf('/') !== -1: standard = 'quasar'; break
@@ -311,7 +311,7 @@ export default function ({ ssrContext }) {
         if (!value) {
           this.$emit('input', '')
         } else {
-          let proporsal = date.quasar({ 
+          let proporsal = date.quasar({
             base: this.value,
             masked: value,
             ampm: this.format24h ? void 0 : this.values.suffix,
@@ -335,23 +335,27 @@ export default function ({ ssrContext }) {
       },
       onSetClick () {
         let today = date.getDefault({ mode: this.mode })
+        // MH added
+        let commitedChanges = true
         switch (true) {
           case this.mode === 'date':
             this.original.date = this.values.date
-            this.$refs.popup.hide()
+            // this.$refs.popup.hide() // MH removed
             break
           case this.mode === 'time':
             this.original.time = this.values.time
-            this.$refs.popup.hide()
+            // this.$refs.popup.hide() // MH removed
             break
           case this.mode === 'datetime' && this.tab === 'date':
             this.original.date = this.values.date
             this.tab = 'time'
+            // MH added
+            commitedChanges = false
             break
           case this.mode === 'datetime' && this.tab === 'time':
             this.original.date = this.values.date
             this.original.time = this.values.time
-            this.$refs.popup.hide()
+            // this.$refs.popup.hide() // MH removed
             break
         }
         let dateValue = this.original.date // || today.quasar
@@ -360,7 +364,7 @@ export default function ({ ssrContext }) {
           dateValue = today.quasar
         }
         if (!timeValue && dateValue) {
-          timeValue =  (this.withSeconds ? '00:00:00' : '00:00')
+          timeValue = (this.withSeconds ? '00:00:00' : '00:00')
         }
         if (dateValue && timeValue) {
           let proporsal = `${dateValue} ${timeValue}`
@@ -369,13 +373,27 @@ export default function ({ ssrContext }) {
             this.__updateDates(parsed)
           }
         }
+        // MH Bug Fix:
+        // Moved the popup.hide() to here so the inputs are updated above BEFORE we close the popup.
+        // Then, at the time you hear the events when the popup closes, you know the field values
+        // are the same as in the picker.
+        if (commitedChanges) {
+          this.$refs.popup.hide(true) // MH: added the commit boolean. See: onPopupHide()
+        }
       },
       onPopupShow () {
         this.tab = 'date'
       },
-      onPopupHide () {
+      onPopupHide (commit) {
         this.values.date = this.original.date
         this.values.time = this.original.time
+
+        // MH added this (and the commit arg):
+        if (commit) {
+          this.$emit('commit')
+        } else {
+          this.$emit('cancel')
+        }
       },
       toggleSuffix () {
         this.values.suffix = this.values.suffix === 'PM' ? 'AM' : 'PM'