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..808d3150 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
@@ -136,7 +147,7 @@ export default {
         this.typedDate = null
       }
 
-      this.$emit('closeCalendar')
+      this.$emit('closeCalendar', true)
     },
     /**
      * emit a clearDate event
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 67055bef..c7b79ebf 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"
@@ -153,7 +154,8 @@ export default {
     maximumView: {
       type: String,
       default: 'year'
-    }
+    },
+    showCalendarOnFocus: Boolean
   },
   data () {
     const startDate = this.openDate ? new Date(this.openDate) : new Date()
@@ -252,6 +254,7 @@ export default {
         return this.close(true)
       }
       this.setInitialView()
+      this.$emit('opened')
     },
     /**
      * Sets the initial picker page view: day, month or year
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()
+  })
 })