Switch datepicker to MDC

.github/CODEOWNERS

@@ -22,6 +22,7 @@
 /src/material/legacy-checkbox/**                            @andrewseguin @devversion
 /src/material/legacy-chips/**                               @andrewseguin
 /src/material/legacy-dialog/**                              @andrewseguin @crisbeto
+/src/material/legacy-datepicker/**                          @crisbeto
 /src/material/legacy-form-field/**                          @mmalerba
 /src/material/legacy-input/**                               @mmalerba
 /src/material/legacy-list/**                                @andrewseguin @crisbeto @devversion
@@ -168,6 +169,7 @@
 /src/dev-app/connected-overlay/**                           @jelbourn @crisbeto
 /src/dev-app/dataset/**                                     @andrewseguin
 /src/dev-app/datepicker/**                                  @mmalerba @crisbeto @zarend
+/src/dev-app/legacy-datepicker/**                           @crisbeto
 /src/dev-app/dev-app/**                                     @mmalerba
 /src/dev-app/dialog/**                                      @andrewseguin @crisbeto
 /src/dev-app/drag-drop/**                                   @crisbeto
@@ -323,6 +325,7 @@
 /tools/public_api_guard/material/chips/testing**            @andrewseguin
 /tools/public_api_guard/material/core**                     @andrewseguin
 /tools/public_api_guard/material/datepicker**               @mmalerba @crisbeto @zarend
+/tools/public_api_guard/material/legacy-datepicker**        @crisbeto
 /tools/public_api_guard/material/divider**                  @andrewseguin @crisbeto
 /tools/public_api_guard/material/expansion**                @andrewseguin
 /tools/public_api_guard/material/form-field**               @mmalerba

.ng-dev/commit-message.mts

@@ -73,6 +73,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/core',
     'material/legacy-core',
     'material/datepicker',
+    'material/legacy-datepicker',
     'material/legacy-dialog',
     'material/divider',
     'material/expansion',

src/components-examples/material/datepicker/BUILD.bazel

@@ -16,13 +16,13 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material-moment-adapter",
+        "//src/material/button",
+        "//src/material/card",
         "//src/material/core",
         "//src/material/datepicker",
         "//src/material/datepicker/testing",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-card",
-        "//src/material/legacy-input",
+        "//src/material/input",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html

@@ -9,7 +9,7 @@
     <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
   <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
 </mat-form-field>
 
@@ -23,7 +23,7 @@
     <input matStartDate placeholder="Start date" formControlName="start">
     <input matEndDate placeholder="End date" formControlName="end">
   </mat-date-range-input>
-  <mat-datepicker-toggle matSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
   <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
 </mat-form-field>

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html

@@ -5,7 +5,7 @@
     <input matEndDate formControlName="end" placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 
   <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html

@@ -5,6 +5,6 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 </mat-form-field>

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html

@@ -5,6 +5,6 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html

@@ -2,7 +2,7 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="datepicker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
 <!-- #docregion datepicker-actions -->
   <mat-datepicker #datepicker>
     <mat-datepicker-actions>
@@ -20,7 +20,7 @@
     <input matEndDate placeholder="End date">
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
 <!-- #docregion date-range-picker-actions -->
   <mat-date-range-picker #rangePicker>
     <mat-date-range-picker-actions>

src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html

@@ -2,14 +2,14 @@
   <mat-label>Inherited calendar color</mat-label>
   <input matInput [matDatepicker]="picker1">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
 <mat-form-field color="accent" appearance="fill">
   <mat-label>Custom calendar color</mat-label>
   <input matInput [matDatepicker]="picker2">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker #picker2 color="primary"></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.html

@@ -2,6 +2,6 @@
   <mat-label>Custom calendar header</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts

@@ -37,17 +37,12 @@ export class DatepickerCustomHeaderExample {
       font-weight: 500;
       text-align: center;
     }
-
-    .example-double-arrow .mat-icon {
-      margin: -22%;
-    }
   `,
   ],
   template: `
     <div class="example-header">
-      <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
-        <mat-icon>keyboard_arrow_left</mat-icon>
-        <mat-icon>keyboard_arrow_left</mat-icon>
+      <button mat-icon-button (click)="previousClicked('year')">
+        <mat-icon>keyboard_double_arrow_left</mat-icon>
       </button>
       <button mat-icon-button (click)="previousClicked('month')">
         <mat-icon>keyboard_arrow_left</mat-icon>
@@ -56,9 +51,8 @@ export class DatepickerCustomHeaderExample {
       <button mat-icon-button (click)="nextClicked('month')">
         <mat-icon>keyboard_arrow_right</mat-icon>
       </button>
-      <button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
-        <mat-icon>keyboard_arrow_right</mat-icon>
-        <mat-icon>keyboard_arrow_right</mat-icon>
+      <button mat-icon-button (click)="nextClicked('year')">
+        <mat-icon>keyboard_double_arrow_right</mat-icon>
       </button>
     </div>
   `,

src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html

@@ -2,7 +2,7 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker">
+  <mat-datepicker-toggle matIconSuffix [for]="picker">
     <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
   </mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>

src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html

@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html

@@ -3,7 +3,7 @@
     <mat-label>Completely disabled</mat-label>
     <input matInput [matDatepicker]="dp1" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp1"></mat-datepicker-toggle>
     <mat-datepicker #dp1></mat-datepicker>
   </mat-form-field>
 </p>
@@ -13,7 +13,7 @@
     <mat-label>Popup disabled</mat-label>
     <input matInput [matDatepicker]="dp2">
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp2" disabled></mat-datepicker-toggle>
     <mat-datepicker #dp2></mat-datepicker>
   </mat-form-field>
 </p>
@@ -23,7 +23,7 @@
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="dp3" disabled>
     <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
+    <mat-datepicker-toggle matIconSuffix [for]="dp3"></mat-datepicker-toggle>
     <mat-datepicker #dp3 disabled="false"></mat-datepicker>
   </mat-form-field>
 </p>

src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html

@@ -3,7 +3,7 @@
   <input matInput [matDatepicker]="picker"
          (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
 

src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html

@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html

@@ -2,6 +2,6 @@
   <mat-label>Verbose datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MMMM DD, YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html

@@ -2,7 +2,7 @@
   <mat-label>Different locale</mat-label>
   <input matInput [matDatepicker]="dp">
   <mat-hint>{{getDateFormatString()}}</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>
 <button mat-button (click)="french()">Dynamically switch to French</button>

src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html

@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html

@@ -2,6 +2,6 @@
   <mat-label>Moment.js datepicker</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html

@@ -3,7 +3,7 @@
 <!-- #docregion toggle -->
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 <!-- #enddocregion toggle -->
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html

@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html

@@ -2,6 +2,6 @@
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker touchUi #picker></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html

@@ -2,7 +2,7 @@
   <mat-label>Angular forms</mat-label>
   <input matInput [matDatepicker]="picker1" [formControl]="date">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
   <mat-datepicker #picker1></mat-datepicker>
 </mat-form-field>
 
@@ -11,14 +11,14 @@
   <input matInput [matDatepicker]="picker2"
          [formControl]="serializedDate">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker #picker2></mat-datepicker>
 </mat-form-field>
 
 <mat-form-field appearance="fill">
   <mat-label>Value binding</mat-label>
   <input matInput [matDatepicker]="picker3" [value]="date.value">
   <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="picker3"></mat-datepicker-toggle>
   <mat-datepicker #picker3></mat-datepicker>
 </mat-form-field>

src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html

@@ -2,7 +2,7 @@
   <mat-label>Month and Year</mat-label>
   <input matInput [matDatepicker]="dp" [formControl]="date">
   <mat-hint>MM/YYYY</mat-hint>
-  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp
                   startView="multi-year"
                   (monthSelected)="setMonthAndYear($event, dp)"

src/components-examples/material/datepicker/index.ts

@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
 import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {DateRangePickerComparisonExample} from './date-range-picker-comparison/date-range-picker-comparison-example';
 import {DateRangePickerFormsExample} from './date-range-picker-forms/date-range-picker-forms-example';
 import {DateRangePickerOverviewExample} from './date-range-picker-overview/date-range-picker-overview-example';
@@ -95,10 +95,10 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
-    MatLegacyCardModule,
+    MatButtonModule,
+    MatCardModule,
     MatDatepickerModule,
-    MatLegacyInputModule,
+    MatInputModule,
     MatIconModule,
     MatNativeDateModule,
     ReactiveFormsModule,

src/dev-app/BUILD.bazel

@@ -51,6 +51,7 @@ ng_module(
         "//src/dev-app/legacy-button",
         "//src/dev-app/legacy-card",
         "//src/dev-app/legacy-checkbox",
+        "//src/dev-app/legacy-datepicker",
         "//src/dev-app/legacy-dialog",
         "//src/dev-app/legacy-input",
         "//src/dev-app/legacy-list",

src/dev-app/datepicker/BUILD.bazel

@@ -12,14 +12,14 @@ ng_module(
         ":custom_header_scss",
     ],
     deps = [
+        "//src/material/button",
+        "//src/material/checkbox",
         "//src/material/core",
         "//src/material/datepicker",
+        "//src/material/form-field",
         "//src/material/icon",
-        "//src/material/legacy-button",
-        "//src/material/legacy-checkbox",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-input",
-        "//src/material/legacy-select",
+        "//src/material/input",
+        "//src/material/select",
     ],
 )
 

src/dev-app/datepicker/custom-header.html

@@ -1,7 +1,6 @@
 <div class="demo-calendar-header">
-  <button mat-icon-button class="demo-double-arrow" (click)="previousClicked('year')">
-    <mat-icon>keyboard_arrow_left</mat-icon>
-    <mat-icon>keyboard_arrow_left</mat-icon>
+  <button mat-icon-button (click)="previousClicked('year')">
+    <mat-icon>keyboard_double_arrow_left</mat-icon>
   </button>
   <button mat-icon-button (click)="previousClicked('month')">
     <mat-icon>keyboard_arrow_left</mat-icon>
@@ -10,8 +9,7 @@
   <button mat-icon-button (click)="nextClicked('month')">
     <mat-icon>keyboard_arrow_right</mat-icon>
   </button>
-  <button mat-icon-button class="demo-double-arrow" (click)="nextClicked('year')">
-    <mat-icon>keyboard_arrow_right</mat-icon>
-    <mat-icon>keyboard_arrow_right</mat-icon>
+  <button mat-icon-button (click)="nextClicked('year')">
+    <mat-icon>keyboard_double_arrow_right</mat-icon>
   </button>
 </div>