Close #43 Close #46: v-model doesn't update the displayed value with Vuetify 2

Author: darrenfang

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-datetime-picker",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "DatetimePicker component for Vuetify.js.",
   "main": "src/index.js",
   "scripts": {
@@ -53,6 +53,6 @@
   "dependencies": {
     "date-fns": "^2.1.0",
     "vue": "^2.6.10",
-    "vuetify": "^2.0.7"
+    "vuetify": "^2.1.3"
   }
 }

src/app.vue

@@ -16,6 +16,7 @@
               <v-flex xs4>
                 <v-datetime-picker v-model="nullDatetime"></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="nullDatetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -25,6 +26,7 @@
               <v-flex xs4>
                 <v-datetime-picker v-model="datetime"></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -34,6 +36,7 @@
               <v-flex xs4>
                 <v-datetime-picker v-model="datetimeString"></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetimeString"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -65,6 +68,7 @@
               <v-flex xs4>
                 <v-datetime-picker v-model="datetime" disabled></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -79,6 +83,7 @@
                   </template>
                 </v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -95,6 +100,7 @@
                   </template>
                 </v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -104,6 +110,7 @@
               <v-flex xs4>
                 <v-datetime-picker v-model="formattedDatetime" date-format="MM/dd/yyyy"></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="formattedDatetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -118,6 +125,7 @@
                   time-format="HH:mm:ss"
                 ></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
 
@@ -134,6 +142,7 @@
                   time-format="HH:mm:ss"
                 ></v-datetime-picker>
               </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
         </v-expansion-panels>

src/components/DatetimePicker.vue

@@ -19,7 +19,7 @@
     </template>
 
     <v-card>
-      <v-card-text style="padding: 0;">
+      <v-card-text class="px-0 py-0">
         <v-tabs fixed-tabs v-model="activeTab">
           <v-tab key="calendar">
             <slot name="dateIcon">
@@ -126,21 +126,8 @@ export default {
       time: DEFAULT_TIME
     }
   },
-  created() {
-    if (!this.datetime) {
-      return
-    }
-
-    let initDateTime
-    if (this.datetime instanceof Date) {
-      initDateTime = this.datetime
-    } else if (typeof this.datetime === 'string' || this.datetime instanceof String) {
-      // see https://stackoverflow.com/a/9436948
-      initDateTime = parse(this.datetime, this.dateTimeFormat, new Date())
-    }
-
-    this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
-    this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
+  mounted() {
+    this.init()
   },
   computed: {
     dateTimeFormat() {
@@ -168,6 +155,22 @@ export default {
     }
   },
   methods: {
+    init() {
+      if (!this.datetime) {
+        return
+      }
+
+      let initDateTime
+      if (this.datetime instanceof Date) {
+        initDateTime = this.datetime
+      } else if (typeof this.datetime === 'string' || this.datetime instanceof String) {
+        // see https://stackoverflow.com/a/9436948
+        initDateTime = parse(this.datetime, this.dateTimeFormat, new Date())
+      }
+
+      this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
+      this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
+    },
     okHandler() {
       this.resetPicker()
       this.$emit('input', this.selectedDatetime)
@@ -188,6 +191,11 @@ export default {
     showTimePicker() {
       this.activeTab = 1
     }
+  },
+  watch: {
+    datetime: function() {
+      this.init()
+    }
   }
 }
 </script>