diff --git a/README.md b/README.md
index 1707e24..7a46d57 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,10 @@
     <img src="https://img.shields.io/npm/v/vue-material.svg" alt="Version">
   </a>
 
+  <a href="https://cdnjs.com/libraries/vue-material">
+    <img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
+  </a>
+
   <a href="https://www.npmjs.com/package/vue-material">
     <img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
   </a>
diff --git a/docs/src/pages/components/DatePicker.vue b/docs/src/pages/components/DatePicker.vue
index dd8e5da..ccf419f 100644
--- a/docs/src/pages/components/DatePicker.vue
+++ b/docs/src/pages/components/DatePicker.vue
@@ -31,11 +31,27 @@
         <example-box card-title="Default">
           <div class="datepicker-demo" slot="demo">
             <md-input-container>
-              <md-datepicker v-model="date" />
+              <md-datepicker id="picker-1" v-model="date" />
             </md-input-container>
 
             <md-input-container>
-              <md-datepicker v-model="date" md-open-on-focus />
+              <label for="picker-2">Open on focus</label>
+              <md-datepicker id="picker-2" v-model="date" md-open-on-focus />
+            </md-input-container>
+
+            <md-input-container>
+              <label for="picker-3">With an label</label>
+              <md-datepicker id="picker-3" v-model="date" md-open-on-focus placeholder="This placeholder don't work on Chrome" />
+            </md-input-container>
+
+            <md-input-container>
+              <label for="picker-4">Required</label>
+              <md-datepicker id="picker-4" v-model="date" required />
+            </md-input-container>
+
+            <md-input-container>
+              <label for="picker-5">Disabled</label>
+              <md-datepicker id="picker-5" v-model="date" disabled />
             </md-input-container>
           </div>
 
diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 5d6248e..679ad39 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -77,6 +77,12 @@
                 <md-table-cell>Sets the type. Default <code>text</code></md-table-cell>
               </md-table-row>
 
+              <md-table-row>
+                <md-table-cell>debounce</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
+              </md-table-row>
+
               <md-table-row>
                 <md-table-cell>disabled</md-table-cell>
                 <md-table-cell><code>Boolean</code></md-table-cell>
@@ -121,6 +127,12 @@
                 <md-table-cell>A required model object to bind the value.</md-table-cell>
               </md-table-row>
 
+              <md-table-row>
+                <md-table-cell>debounce</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
+              </md-table-row>
+
               <md-table-row>
                 <md-table-cell>disabled</md-table-cell>
                 <md-table-cell><code>Boolean</code></md-table-cell>
diff --git a/package.json b/package.json
index 45a1587..c49a3e2 100644
--- a/package.json
+++ b/package.json
@@ -63,13 +63,13 @@
     "css-mqpacker": "^5.0.1",
     "date-fns": "^1.28.0",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
-    "eslint": "^3.16.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.3",
     "eslint-plugin-html": "^2.0.1",
+    "eslint": "^3.16.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.15.0",
-    "extract-text-webpack-plugin": "^2.0.0",
+    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.10.1",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "highlight.js": "^9.9.0",
diff --git a/src/components/mdDatePicker/mdDatePicker.scss b/src/components/mdDatePicker/mdDatePicker.scss
index ab23e91..605c02e 100644
--- a/src/components/mdDatePicker/mdDatePicker.scss
+++ b/src/components/mdDatePicker/mdDatePicker.scss
@@ -8,6 +8,12 @@ $month-small-width: 280px;
   display: flex;
   flex: 1;
 
+  &.md-disabled {
+    .md-icon {
+      cursor: default;
+    }
+  }
+
   .md-icon {
     cursor: pointer;
   }
diff --git a/src/components/mdDatePicker/mdDatePicker.vue b/src/components/mdDatePicker/mdDatePicker.vue
index 372dd43..5736a8f 100644
--- a/src/components/mdDatePicker/mdDatePicker.vue
+++ b/src/components/mdDatePicker/mdDatePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-datepicker">
+  <div class="md-datepicker" :class="{ 'md-disabled': disabled }">
     <md-icon @click.native="openPicker">event</md-icon>
 
     <md-input
@@ -159,8 +159,8 @@
           return years;
         },
         modelDate: this.value,
-        currentDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
-        selectedDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
+        currentDate: this.parseInitialDate(),
+        selectedDate: this.parseInitialDate(),
         createdMonths: [
           addMonths(this.value, -1),
           this.value,
@@ -192,6 +192,10 @@
     watch: {
       selectedDate(selected) {
         this.modelDate = formatDate(selected, this.locale.dateFormat);
+      },
+      value(value) {
+        this.setModelValue(this.parseInitialDate());
+        this.modelDate = formatDate(value, this.locale.dateFormat);
       }
     },
     methods: {
@@ -228,6 +232,9 @@
       setMonth(month) {
         this.setModelValue(setMonth(this.currentDate, month));
       },
+      parseInitialDate() {
+        return isValidDate(this.value) ? parseDate(this.value) : Date.now();
+      },
       setModelValue(date) {
         this.selectedDate = date;
         this.$emit('input', date);
@@ -258,15 +265,17 @@
         });
       },
       openPicker() {
-        window.addEventListener('resize', this.calculatePopupPosition);
-        this.calculatePopupPosition();
-        this.rootElement.appendChild(this.pickerElement);
-        this.rootElement.appendChild(this.backdropElement);
-        getComputedStyle(this.pickerElement).top;
-        getComputedStyle(this.backdropElement).top;
-        this.active = true;
-        this.currentDate = parseDate(this.value);
-        this.selectedDate = parseDate(this.value);
+        if (!this.disabled) {
+          window.addEventListener('resize', this.calculatePopupPosition);
+          this.calculatePopupPosition();
+          this.rootElement.appendChild(this.pickerElement);
+          this.rootElement.appendChild(this.backdropElement);
+          getComputedStyle(this.pickerElement).top;
+          getComputedStyle(this.backdropElement).top;
+          this.active = true;
+          this.currentDate = parseDate(this.value);
+          this.selectedDate = parseDate(this.value);
+        }
       },
       closePicker() {
         const cleanUp = () => {
diff --git a/src/components/mdInputContainer/common.js b/src/components/mdInputContainer/common.js
index 605000e..944cfa1 100644
--- a/src/components/mdInputContainer/common.js
+++ b/src/components/mdInputContainer/common.js
@@ -1,11 +1,21 @@
 export default {
   props: {
     value: [String, Number, Date],
+    debounce: {
+      type: Number,
+      default: 3E2
+    },
     disabled: Boolean,
     required: Boolean,
     maxlength: [Number, String],
+    name: String,
     placeholder: String
   },
+  data() {
+    return {
+      timeout: 0
+    };
+  },
   watch: {
     value() {
       this.updateValues();
@@ -28,6 +38,16 @@ export default {
       this.parentContainer.enableCounter = this.maxlength > 0;
       this.parentContainer.counterLength = this.maxlength;
     },
+    lazyEventEmitter() {
+      if (this.timeout) {
+        window.clearTimeout(this.timeout);
+      }
+
+      this.timeout = window.setTimeout(() => {
+        this.$emit('change', this.$el.value);
+        this.$emit('input', this.$el.value);
+      }, this.debounce);
+    },
     setParentValue(value) {
       this.parentContainer.setValue(value || this.$el.value);
     },
@@ -62,8 +82,7 @@ export default {
     },
     onInput($event) {
       this.updateValues();
-      this.$emit('change', this.$el.value, $event);
-      this.$emit($event.type, this.$el.value, $event);
+      this.lazyEventEmitter();
     }
   }
 };
diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue
index 253b9fe..dec8965 100644
--- a/src/components/mdSpinner/mdSpinner.vue
+++ b/src/components/mdSpinner/mdSpinner.vue
@@ -2,7 +2,7 @@
   <transition name="md-spinner" appear>
     <div class="md-spinner" :class="[themeClass, classes]":style="styles">
       <svg class="md-spinner-draw" viewBox="25 25 50 50">
-        <circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress"></circle>
+        <circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress" />
       </svg>
     </div>
   </transition>