feat(dateinput): format typeable inputs on blur (sumcumo#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

Author: mst101

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>

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')

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')
+  })
 })