diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 25f03eee8..22199d0c8 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -4,7 +4,7 @@ import {NgModule} from '@angular/core';
 import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
-import {MaterialModule} from '@angular/material';
+import {MaterialModule, MdNativeDateModule} from '@angular/material';
 import {MaterialDocsApp} from './material-docs-app';
 import {Homepage} from './pages/homepage/homepage';
 import {routing} from './routes';
@@ -42,6 +42,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     FormsModule,
     HttpModule,
     MaterialModule,
+    MdNativeDateModule,
     routing,
   ],
   providers: [
diff --git a/src/app/examples/datepicker-overview/datepicker-overview-example.css b/src/app/examples/datepicker-overview/datepicker-overview-example.css
new file mode 100644
index 000000000..743230875
--- /dev/null
+++ b/src/app/examples/datepicker-overview/datepicker-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/app/examples/datepicker-overview/datepicker-overview-example.html b/src/app/examples/datepicker-overview/datepicker-overview-example.html
new file mode 100644
index 000000000..3dbb917b0
--- /dev/null
+++ b/src/app/examples/datepicker-overview/datepicker-overview-example.html
@@ -0,0 +1,5 @@
+<md-input-container>
+  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
+  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+</md-input-container>
+<md-datepicker #picker></md-datepicker>
diff --git a/src/app/examples/datepicker-overview/datepicker-overview-example.ts b/src/app/examples/datepicker-overview/datepicker-overview-example.ts
new file mode 100644
index 000000000..51fce60b5
--- /dev/null
+++ b/src/app/examples/datepicker-overview/datepicker-overview-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'datepicker-overview-example',
+  templateUrl: './datepicker-overview-example.html',
+  styleUrls: ['./datepicker-overview-example.css'],
+})
+export class DatepickerOverviewExample {}
diff --git a/src/app/examples/example-module.ts b/src/app/examples/example-module.ts
index 9c1b974af..fb53dc482 100644
--- a/src/app/examples/example-module.ts
+++ b/src/app/examples/example-module.ts
@@ -70,6 +70,7 @@ import {SelectOverviewExample} from './select-overview/select-overview-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
+import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example';
 
 
 export interface LiveExample {
@@ -99,6 +100,7 @@ export const EXAMPLE_COMPONENTS = {
   'card-overview': {title: 'Basic cards', component: CardOverviewExample},
   'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample},
   'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample},
+  'datepicker-overview': {title: 'Basic datepicker', component: DatepickerOverviewExample},
   'dialog-overview': {
     title: 'Basic dialog',
     component: DialogOverviewExample,
@@ -182,6 +184,7 @@ export const EXAMPLE_LIST = [
   ChipsStackedExample,
   CheckboxConfigurableExample,
   CheckboxOverviewExample,
+  DatepickerOverviewExample,
   DialogOverviewExample,
   DialogOverviewExampleDialog,
   DialogResultExample,
diff --git a/src/app/shared/documentation-items/documentation-items.ts b/src/app/shared/documentation-items/documentation-items.ts
index 851982b1c..b7f4df4e7 100644
--- a/src/app/shared/documentation-items/documentation-items.ts
+++ b/src/app/shared/documentation-items/documentation-items.ts
@@ -20,6 +20,7 @@ const DOCS = [
     items: [
       {id: 'autocomplete', name: 'Autocomplete', examples: ['autocomplete-overview']},
       {id: 'checkbox', name: 'Checkbox', examples: ['checkbox-configurable']},
+      {id: 'datepicker', name: 'Datepicker', examples: ['datepicker-overview']},
       {id: 'input', name: 'Input', examples: ['input-form']},
       {id: 'radio', name: 'Radio button', examples: ['radio-ng-model']},
       {id: 'select', name: 'Select', examples: ['select-form']},
diff --git a/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.css b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.css
new file mode 100644
index 000000000..743230875
--- /dev/null
+++ b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.html b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.html
new file mode 100644
index 000000000..3dbb917b0
--- /dev/null
+++ b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.html
@@ -0,0 +1,5 @@
+<md-input-container>
+  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
+  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+</md-input-container>
+<md-datepicker #picker></md-datepicker>
diff --git a/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.ts b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.ts
new file mode 100644
index 000000000..51fce60b5
--- /dev/null
+++ b/src/assets/plunker/examples/datepicker-overview/datepicker-overview-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'datepicker-overview-example',
+  templateUrl: './datepicker-overview-example.html',
+  styleUrls: ['./datepicker-overview-example.css'],
+})
+export class DatepickerOverviewExample {}
diff --git a/src/assets/plunker/examples/list-sections/list-sections-example.ts b/src/assets/plunker/examples/list-sections/list-sections-example.ts
index d6fd70339..d5a20e8f4 100644
--- a/src/assets/plunker/examples/list-sections/list-sections-example.ts
+++ b/src/assets/plunker/examples/list-sections/list-sections-example.ts
@@ -3,6 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'list-sections-example',
+  styleUrls: ['./list-sections-example.css'],
   templateUrl: './list-sections-example.html',
 })
 export class ListSectionsExample {