diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md
index 576d73ec3b..3f916a04c6 100644
--- a/src/guide/component-attrs.md
+++ b/src/guide/component-attrs.md
@@ -12,7 +12,7 @@ When a component returns a single root node, non-prop attributes will automatica
 app.component('date-picker', {
   template: `
     <div class="date-picker">
-      <input type="datetime" />
+      <input type="datetime-local" />
     </div>
   `
 })
@@ -26,7 +26,7 @@ In the event we need to define the status of the date-picker component via a `da
 
 <!-- Rendered date-picker component -->
 <div class="date-picker" data-status="activated">
-  <input type="datetime" />
+  <input type="datetime-local" />
 </div>
 ```
 
@@ -91,7 +91,7 @@ app.component('date-picker', {
   inheritAttrs: false,
   template: `
     <div class="date-picker">
-      <input type="datetime" v-bind="$attrs" />
+      <input type="datetime-local" v-bind="$attrs" />
     </div>
   `
 })
@@ -105,7 +105,7 @@ With this new configuration, our `data-status` attribute will be applied to our
 
 <!-- Rendered date-picker component -->
 <div class="date-picker">
-  <input type="datetime" data-status="activated" />
+  <input type="datetime-local" data-status="activated" />
 </div>
 ```