feat(MdDatepicker): add support for labels (#1265)

Samuell1 · marcosmoura · commit 9f61c0b1e0bf · 2017-12-06T00:55:06.000-02:00
* feat(MdDatepicker): add label style

* docs(MdDatepicker): add example with label

* fix(MdDatepicker): remove px unit
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -1,4 +1,5 @@
 <example src="./examples/BasicDatepicker.vue" />
+<example src="./examples/LabeledDatepicker.vue" />
 <example src="./examples/CancelOpenDatepicker.vue" />
 <example src="./examples/DisabledDatesDatepicker.vue" />
 
@@ -13,6 +14,8 @@
       <h2>Datepicker</h2>
 
       <code-example title="Basic Example" :component="examples['basic-datepicker']" />
+
+      <code-example title="Labeled Example" :component="examples['labeled-datepicker']" />
     </div>
 
     <div class="page-container-section">
diff --git a/docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <md-datepicker v-model="selectedDate">
+      <label>Select date</label>
+    </md-datepicker>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LabeledDatepicker',
+    data: () => ({
+      selectedDate: null
+    })
+  }
+</script>
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
@@ -116,6 +116,9 @@
   }
 
   .md-datepicker {
+    label {
+      top: 0 !important;
+    }
     .md-date-icon {
       cursor: pointer;
     }
