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;
     }