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

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