From 53f1e8fb9b429134e35676a01eabaf2bcfe667f8 Mon Sep 17 00:00:00 2001
From: mst101 <mst101@users.noreply.github.com>
Date: Fri, 23 Oct 2020 10:44:57 +0200
Subject: [PATCH] feat(dateinput): format typeable inputs on blur (#44)

* Add prop to determine first-day-of-week

* Fix error with no. of blank days

* Fix minor issues with first-day-of-week

* Add first-day-of-week to demo examples

* Fix typeable calendar not formatting correctly on blur

* Fix typeable calendar input not being formatted on blur
---
 docs/.vuepress/components/Demo.vue           |  4 +---
 src/components/DateInput.vue                 | 22 +++++++++++++-------
 test/unit/specs/DateInput/typedDates.spec.js |  7 +++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/docs/.vuepress/components/Demo.vue b/docs/.vuepress/components/Demo.vue
index 4b17a089..0ab0cf97 100755
--- a/docs/.vuepress/components/Demo.vue
+++ b/docs/.vuepress/components/Demo.vue
@@ -31,9 +31,7 @@
       />
       <div class="coding">
         <code>
-          &lt;datepicker
-          placeholder="Select Date"
-          first-day-of-week="mon"&gt;&lt;/datepicker&gt;
+          &lt;datepicker placeholder="Select Date" first-day-of-week="mon"&gt;&lt;/datepicker&gt;
         </code>
         <hr />
         <p>{{ vModelExample }}</p>
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 64659309..0a37a7b7 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -115,6 +115,9 @@ export default {
       if (this.typedDate.length) {
         return this.typedDate
       }
+      return this.formattedDate
+    },
+    formattedDate() {
       return typeof this.format === 'function'
         ? this.format(new Date(this.selectedDate))
         : this.utils.formatDate(new Date(this.selectedDate), this.format, this.translation)
@@ -136,15 +139,20 @@ export default {
       this.$emit('clear-date')
     },
     /**
-     * nullify the typed date to defer to regular formatting
-     * called once the input is blurred
+     * Submits a typed date if it's valid
      */
     inputBlurred() {
-      const parsableDate = this.parseDate(this.input.value)
-      if (this.typeable && Number.isNaN(Date.parse(parsableDate))) {
-        this.clearDate()
-        this.input.value = null
-        this.typedDate = ''
+      if (this.typeable) {
+        const parsableDate = this.parseDate(this.input.value)
+        const parsedDate = Date.parse(parsableDate)
+
+        if (Number.isNaN(parsedDate)) {
+          this.clearDate()
+        } else {
+          this.input.value = this.formattedDate
+          this.typedDate = ''
+          this.$emit('typed-date', parsedDate)
+        }
       }
       this.$emit('blur')
       this.$emit('close-calendar')
diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js
index 44f1a066..180aceb5 100755
--- a/test/unit/specs/DateInput/typedDates.spec.js
+++ b/test/unit/specs/DateInput/typedDates.spec.js
@@ -172,4 +172,11 @@ describe('Datepicker mount', () => {
 
     expect(new Date(wrapper.vm.pageDate).getMonth()).toBe(1)
   })
+
+  it('formats the date on blur', () => {
+    const input = wrapper.find('input')
+    input.element.value = '2018-04-24'
+    input.trigger('blur')
+    expect(input.element.value).toEqual('24 Apr 2018')
+  })
 })