feat(MdDatepicker): add close and open events (#1577)

* feat(MdDatepicker): add close, open events * docs(MdDatepicker): close, open events
vuematerial · Mar 7, 2018 · 5cb9b7b · 5cb9b7b
1 parent dc7892e
commit 5cb9b7b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -32,6 +32,7 @@
         <p>All the following options can be applied to the md-datepicker component:</p>
 
         <api-table :headings="props.headings" :props="props.props" slot="props" />
+        <api-table :headings="events.headings" :props="events.props" slot="events" />
       </api-item>
     </div>
   </page-container>
@@ -72,6 +73,21 @@
             defaults: 'true'
           }
         ]
+      },
+      events: {
+        headings: ['Name', 'Description', 'Value'],
+        props: [
+          {
+            name: 'md-opened',
+            description: 'Triggered when a datepicker dialog opens',
+            value: 'null'
+          },
+          {
+            name: 'md-closed',
+            description: 'Triggered when a datepicker dialog closes',
+            value: 'null'
+          },
+        ]
       }
     })
   }

diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
@@ -84,6 +84,11 @@
       toggleDialog () {
         if (!isFirefox || this.mdOverrideNative) {
           this.showDialog = !this.showDialog
+          if (this.showDialog) {
+            this.$emit('md-opened')
+          } else {
+            this.$emit('md-closed')
+          }
         } else {
           this.$refs.input.$el.click()
         }