From 9f61c0b1e0bf6940de1a1e87fedc52c6c0882c6b Mon Sep 17 00:00:00 2001
From: Samuell <Samuell1@users.noreply.github.com>
Date: Wed, 6 Dec 2017 03:55:06 +0100
Subject: [PATCH] feat(MdDatepicker): add support for labels (#1265)

* feat(MdDatepicker): add label style

* docs(MdDatepicker): add example with label

* fix(MdDatepicker): remove px unit
---
 .../pages/Components/Datepicker/Datepicker.vue   |  3 +++
 .../Datepicker/examples/LabeledDatepicker.vue    | 16 ++++++++++++++++
 src/components/MdDatepicker/MdDatepicker.vue     |  3 +++
 3 files changed, 22 insertions(+)
 create mode 100644 docs/app/pages/Components/Datepicker/examples/LabeledDatepicker.vue

diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
index f5a29d562..9e582eb2a 100644
--- 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
new file mode 100644
index 000000000..7af6e3694
--- /dev/null
+++ 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
index 20e951117..acda13682 100644
--- 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;
     }