From 1c31375fa926858d02f0d7225254a7835a9f417d Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Fri, 12 Oct 2018 12:10:58 -0400
Subject: [PATCH 1/3] add showCalendarOnFocus prop

---
 example/Demo.vue                            |  8 ++++++++
 src/components/DateInput.vue                | 15 +++++++++++++--
 src/components/Datepicker.vue               |  4 +++-
 test/unit/specs/DateInput/DateInput.spec.js |  8 ++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/example/Demo.vue b/example/Demo.vue
index cd085741..d27c3a0f 100644
--- a/example/Demo.vue
+++ b/example/Demo.vue
@@ -17,6 +17,14 @@
       </code>
     </div>
 
+    <div class="example">
+      <h3>datepicker opens on focus</h3>
+      <datepicker placeholder="Type or select date" :typeable="true" :show-calendar-on-focus="true"/>
+      <code>
+          &lt;datepicker placeholder="Type or select date" :show-calendar-on-focus="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+
     <div class="example">
       <h3>Bootstrap styled datepicker</h3>
       <datepicker
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 843e1d94..f845a25b 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -24,6 +24,7 @@
       :required="required"
       :readonly="!typeable"
       @click="showCalendar"
+      @focus="showFocusCalendar"
       @keyup="parseTypedDate"
       @blur="inputBlurred"
       autocomplete="off">
@@ -62,7 +63,8 @@ export default {
     required: Boolean,
     typeable: Boolean,
     bootstrapStyling: Boolean,
-    useUtc: Boolean
+    useUtc: Boolean,
+    showCalendarOnFocus: Boolean
   },
   data () {
     const constructedDateUtils = makeDateUtils(this.useUtc)
@@ -102,7 +104,16 @@ export default {
   },
   methods: {
     showCalendar () {
-      this.$emit('showCalendar')
+      // prevent to emit the event twice if we are listening focus
+      if (!this.showCalendarOnFocus) {
+        this.$emit('showCalendar')
+      }
+    },
+
+    showFocusCalendar () {
+      if (this.showCalendarOnFocus) {
+        this.$emit('showCalendar', true)
+      }
     },
     /**
      * Attempt to parse a typed date
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 92d6a91a..1a9eb467 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -22,6 +22,7 @@
       :required="required"
       :bootstrapStyling="bootstrapStyling"
       :use-utc="useUtc"
+      :show-calendar-on-focus="showCalendarOnFocus"
       @showCalendar="showCalendar"
       @closeCalendar="close"
       @typedDate="setTypedDate"
@@ -157,7 +158,8 @@ export default {
     maximumView: {
       type: String,
       default: 'year'
-    }
+    },
+    showCalendarOnFocus: Boolean
   },
   data () {
     const startDate = this.openDate ? new Date(this.openDate) : new Date()
diff --git a/test/unit/specs/DateInput/DateInput.spec.js b/test/unit/specs/DateInput/DateInput.spec.js
index 82d17e50..7a8ee396 100644
--- a/test/unit/specs/DateInput/DateInput.spec.js
+++ b/test/unit/specs/DateInput/DateInput.spec.js
@@ -80,4 +80,12 @@ describe('DateInput', () => {
     wrapper.find('input').trigger('blur')
     expect(wrapper.emitted('closeCalendar')).toBeTruthy()
   })
+
+  it('should open the calendar on focus', () => {
+    wrapper.setProps({
+      showCalendarOnFocus: true
+    })
+    wrapper.find('input').trigger('focus')
+    expect(wrapper.emitted().showCalendar).toBeTruthy()
+  })
 })

From 19d65e2e8c3857486e280a3408d6b68886ea4eb3 Mon Sep 17 00:00:00 2001
From: Matthew Rathbone <matthew@kickbox.com>
Date: Tue, 6 Nov 2018 16:55:25 -0600
Subject: [PATCH 2/3] closed event now fires if you click outside of the input

---
 src/components/DateInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 843e1d94..bfdb250b 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -136,7 +136,7 @@ export default {
         this.typedDate = null
       }
 
-      this.$emit('closeCalendar')
+      this.$emit('closeCalendar', true)
     },
     /**
      * emit a clearDate event

From 1175c0c0504a6e1b8ff2bcd0cb1e0977e840f247 Mon Sep 17 00:00:00 2001
From: Matthew Rathbone <matthew@kickbox.com>
Date: Tue, 6 Nov 2018 17:00:38 -0600
Subject: [PATCH 3/3] Fixes the missing opened event

---
 src/components/Datepicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 67055bef..e9f785cd 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -252,6 +252,7 @@ export default {
         return this.close(true)
       }
       this.setInitialView()
+      this.$emit('opened')
     },
     /**
      * Sets the initial picker page view: day, month or year