diff --git a/src/lib/datepicker/calendar-body.ts b/src/lib/datepicker/calendar-body.ts
index 588add90743..3dfa45a8513 100644
--- a/src/lib/datepicker/calendar-body.ts
+++ b/src/lib/datepicker/calendar-body.ts
@@ -34,7 +34,7 @@ export class MdCalendarCell {
  */
 @Component({
   moduleId: module.id,
-  selector: '[md-calendar-body]',
+  selector: '[md-calendar-body], [mat-calendar-body]',
   templateUrl: 'calendar-body.html',
   styleUrls: ['calendar-body.css'],
   host: {
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
index 897d96241a9..d4047b6d9a3 100644
--- a/src/lib/datepicker/calendar.ts
+++ b/src/lib/datepicker/calendar.ts
@@ -47,7 +47,7 @@ import {Subscription} from 'rxjs/Subscription';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-calendar',
+  selector: 'md-calendar, mat-calendar',
   templateUrl: 'calendar.html',
   styleUrls: ['calendar.css'],
   host: {
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index 7e91ed6c755..854210cbf77 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/src/lib/datepicker/datepicker.ts
@@ -79,7 +79,7 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-datepicker-content',
+  selector: 'md-datepicker-content, mat-datepicker-content',
   templateUrl: 'datepicker-content.html',
   styleUrls: ['datepicker-content.css'],
   host: {
diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts
index 91c34893ed5..e382b1a17d6 100644
--- a/src/lib/datepicker/year-view.ts
+++ b/src/lib/datepicker/year-view.ts
@@ -29,7 +29,7 @@ import {MD_DATE_FORMATS, MdDateFormats} from '../core/datetime/date-formats';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-year-view',
+  selector: 'md-year-view, mat-year-view',
   templateUrl: 'year-view.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,