diff --git a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
index bb220790d..b2b7aa3c6 100644
--- a/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
+++ b/docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue
@@ -12,10 +12,10 @@
     <md-field>
       <label for="movie">Date format</label>
       <md-select v-model="dateFormat">
-        <md-option value="YYYY-MM-DD">default</md-option>
-        <md-option value="YYYY/MM/DD">YYYY/MM/DD</md-option>
-        <md-option value="DD/MM/YYYY">DD/MM/YYYY</md-option>
-        <md-option value="MM/DD/YYYY">MM/DD/YYYY</md-option>
+        <md-option value="yyyy-MM-dd">default</md-option>
+        <md-option value="yyyy/MM/dd">yyyy/MM/dd</md-option>
+        <md-option value="dd/MM/yyyy">dd/MM/yyyy</md-option>
+        <md-option value="MM/dd/yyyy">MM/dd/yyyy</md-option>
       </md-select>
       <span class="md-helper-text">This config is global.</span>
     </md-field>
diff --git a/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue
index 67630ea74..88efa87bf 100644
--- a/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue
+++ b/docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue
@@ -46,7 +46,7 @@
   export default {
     name: 'MultiTypesDatepicker',
     data () {
-      let dateFormat = this.$material.locale.dateFormat || 'YYYY-MM-DD'
+      let dateFormat = this.$material.locale.dateFormat || 'yyyy-MM-dd'
       let now = new Date()
 
       return {
@@ -82,7 +82,7 @@
         }
       },
       dateFormat () {
-        return this.$material.locale.dateFormat || 'YYYY-MM-DD'
+        return this.$material.locale.dateFormat || 'yyyy-MM-dd'
       },
       mdType () {
         switch (this.mdTypeValue) {
diff --git a/docs/app/pages/Configuration.vue b/docs/app/pages/Configuration.vue
index e8938e070..196b343ba 100644
--- a/docs/app/pages/Configuration.vue
+++ b/docs/app/pages/Configuration.vue
@@ -8,14 +8,14 @@
         import Vue from 'vue'
 
         // change single option
-        Vue.material.locale.dateFormat = 'DD/MM/YYYY'
+        Vue.material.locale.dateFormat = 'dd/MM/yyyy'
 
         // change multiple options
         Vue.material = {
           ...Vue.material,
           locale: {
             ...Vue.material.locale,
-            dateFormat: 'DD/MM/YYYY',
+            dateFormat: 'dd/MM/yyyy',
             firstDayOfAWeek: 1
           }
         }
@@ -51,7 +51,7 @@
             endYear: 2099,
 
             // date format for date picker
-            dateFormat: 'YYYY-MM-DD',
+            dateFormat: 'yyyy-MM-dd',
 
             // i18n strings
             days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
diff --git a/package.json b/package.json
index ff7b7f873..3efedfb56 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "css-loader": "^0.28.9",
     "css-mqpacker": "^6.0.2",
     "cz-conventional-changelog": "^2.1.0",
-    "date-fns": "^2.0.0-alpha.7",
+    "date-fns": "^2.0.0-alpha.27",
     "deepmerge": "^2.0.1",
     "eslint": "^4.16.0",
     "eslint-config-standard": "^11.0.0-beta.0",
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 083979070..1213f7bde 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -84,7 +84,7 @@
           : 'date'
       },
       dateFormat () {
-        return this.locale.dateFormat || 'YYYY-MM-DD'
+        return this.locale.dateFormat || 'yyyy-MM-dd'
       },
       modelType () {
         if (this.isModelTypeString) {
@@ -120,12 +120,12 @@
         return parsedDate && isValid(parsedDate) ? parsedDate : null
       },
       pattern () {
-        return this.dateFormat.replace(/YYYY|MM|DD/g, match => {
+        return this.dateFormat.replace(/yyyy|MM|dd/g, match => {
           switch (match) {
-          case 'YYYY':
+          case 'yyyy':
             return '[0-9]{4}'
           case 'MM':
-          case 'DD':
+          case 'dd':
             return '[0-9]{2}'
           }
         })
@@ -172,7 +172,7 @@
       },
       dateFormat () {
         if (this.localDate) {
-          this.inputDate = format(this.inputDate, this.dateFormat)
+          this.inputDate = format(this.localDate, this.dateFormat)
         }
       }
     },
diff --git a/src/material.js b/src/material.js
index 35ad9f45d..65e2e444f 100644
--- a/src/material.js
+++ b/src/material.js
@@ -9,7 +9,7 @@ const init = () => {
     locale: {
       startYear: 1900,
       endYear: 2099,
-      dateFormat: 'YYYY-MM-DD',
+      dateFormat: 'yyyy-MM-dd',
       days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
       shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
       shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
diff --git a/yarn.lock b/yarn.lock
index ddb4bdde7..4db8ffc41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2696,9 +2696,10 @@ datauri@^1.1.0:
     mimer "^0.3.2"
     semver "^5.5.0"
 
-date-fns@^2.0.0-alpha.7:
-  version "2.0.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.11.tgz#586e855107dc4717ba4d9f2c41cf12c3b72512c0"
+date-fns@^2.0.0-alpha.27:
+  version "2.0.0-alpha.27"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
+  integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
 
 date-now@^0.1.4:
   version "0.1.4"