Fix force input value refresh when date is not valid

tmepple · Sep 1, 2017 · 6689c74 · 6689c74
1 parent e1d7357
commit 6689c74
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
@@ -204,7 +204,6 @@
 
             return {
                 dateSelected: this.value,
-                formattedDateSelected: this.formatValue(this.value),
                 focusedDateData: {
                     month: focusedDate.getMonth(),
                     year: focusedDate.getFullYear()
@@ -233,6 +232,10 @@
                 return arrayOfYears.reverse()
             },
 
+            formattedDateSelected() {
+                return this.formatValue(this.dateSelected)
+            },
+
             isFirstMonth() {
                 if (!this.minDate) return false
                 const dateToCheck = new Date(this.focusedDateData.year, this.focusedDateData.month)
@@ -262,7 +265,6 @@
                     month: currentDate.getMonth(),
                     year: currentDate.getFullYear()
                 }
-                this.formattedDateSelected = this.formatValue(value)
                 this.$emit('input', value)
                 if (this.$refs.dropdown) {
                     this.$refs.dropdown.isActive = false
@@ -297,6 +299,11 @@
                     this.dateSelected = date
                 } else {
                     this.dateSelected = null
+                    // force refresh when not valid date
+                    this.$nextTick(() => {
+                        // see computed 'formattedDateSelected'
+                        this.$refs.input.$refs.input.value = this.formatValue(this.dateSelected)
+                    })
                 }
             },
 
@@ -371,9 +378,6 @@
                 const date = event.target.value
                 this.dateSelected = date ? new Date(date) : null
             }
-        },
-        mounted() {
-            // this.formattedDateSelected = this.formatValue(this.dateSelected)
         }
     }
 </script>