feat(datepicker): @Output for year and month selected in multiyear/year

src/demo-app/datepicker/datepicker-demo.html

@@ -90,7 +90,7 @@ <h2>Input disabled datepicker</h2>
            [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled
            placeholder="Input disabled">
     <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
-                   [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
 
@@ -118,7 +118,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
            [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
            placeholder="Input disabled, datepicker enabled">
     <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
-                   [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
 
@@ -133,3 +133,34 @@ <h2>Datepicker with value property binding</h2>
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Datepicker emulating year picker</h2>
+<div demo-moment-year>
+    <mat-form-field>
+      <input matInput [matDatepicker]="datePicker5" placeholder="Choose an year" 
+             [formControl]="yearDateControl">
+      <mat-datepicker-toggle  matSuffix [for]="datePicker5"></mat-datepicker-toggle>
+      <mat-datepicker
+          #datePicker5
+          [touchUi]="true"
+          startView="multi-year"
+          (yearSelected)="chosenYearHandler($event, datePicker5)">
+      </mat-datepicker>
+    </mat-form-field>
+</div>
+
+<h2>Datepicker emulating month/year picker</h2>
+<div demo-moment-month-year>
+  <mat-form-field>
+    <input matInput [matDatepicker]="datePicker6" placeholder="Choose a date (year and month)" 
+           [formControl]="monthYearDateControl">
+    <mat-datepicker-toggle  matSuffix [for]="datePicker6"></mat-datepicker-toggle>
+    <mat-datepicker
+        #datePicker6
+        [touchUi]="true"
+        startView="multi-year"
+        (yearSelected)="chosenYearFromYearMonthHandler($event)"
+        (monthSelected)="chosenMonthFromYearMonthHandler($event, datePicker6)">
+    </mat-datepicker>
+  </mat-form-field>
+</div>

src/demo-app/datepicker/datepicker-demo.scss

@@ -1,3 +1,4 @@
 mat-calendar {
   width: 300px;
 }
+

src/demo-app/datepicker/datepicker-demo.ts

@@ -6,10 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material';
+import {MomentDateAdapter} from '@angular/material-moment-adapter';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 
+import * as _moment from 'moment';
+import {default as _rollupMoment} from 'moment';
+const moment = _rollupMoment || _moment;
 
 @Component({
   moduleId: module.id,
@@ -31,11 +36,78 @@ export class DatepickerDemo {
   lastDateInput: Date | null;
   lastDateChange: Date | null;
 
+  monthYearDateControl = new FormControl(moment([2017, 10, 25]));
+  yearDateControl = new FormControl(moment([2017, 10, 25]));
+
   dateFilter =
       (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
 
-  dateCtrl = new FormControl();
+  chosenYearHandler(year: number, datepicker: MatDatepicker<Date>) {
+    const actualDate = this.yearDateControl.value;
+    actualDate.year(year);
+    this.yearDateControl.setValue(actualDate);
+    datepicker.close();
+  }
+
+  _open(event: Event, datepicker: MatDatepicker<Date>) {
+    datepicker.open();
+    event.stopPropagation();
+  }
+
+  chosenYearFromYearMonthHandler(year: number) {
+    const actualDate = this.monthYearDateControl.value;
+    actualDate.year(year);
+    this.monthYearDateControl.setValue(actualDate);
+  }
+
+  chosenMonthFromYearMonthHandler(month: number, datepicker: MatDatepicker<Date>) {
+    const actualDate = this.monthYearDateControl.value;
+    actualDate.month(month);
+    this.monthYearDateControl.setValue(actualDate);
+  }
 }
+
+export const DEMO_MOMENT_MONTH_YEAR_FORMATS = {
+  parse: {
+    dateInput: 'MM/YYYY',
+  },
+  display: {
+    dateInput: 'MM/YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+@Directive({
+  selector: '[demo-moment-month-year]',
+  providers: [
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+    {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_MONTH_YEAR_FORMATS},
+  ]
+})
+export class DemoMomentMonthYearDirective { }
+
+export const DEMO_MOMENT_YEAR_FORMATS = {
+  parse: {
+    dateInput: 'YYYY',
+  },
+  display: {
+    dateInput: 'YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+@Directive({
+  selector: '[demo-moment-year]',
+  providers: [
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+    {provide: MAT_DATE_FORMATS, useValue: DEMO_MOMENT_YEAR_FORMATS},
+  ]
+})
+export class DemoMomentYearDirective { }

src/demo-app/demo-app-module.ts

@@ -31,7 +31,7 @@ import {AccessibilityDemoModule} from './a11y/a11y-module';
   ],
   entryComponents: [
     EntryApp,
-  ],
+  ]
 })
 export class DemoAppModule {
   constructor(private _appRef: ApplicationRef) { }

src/demo-app/demo-app/demo-module.ts

@@ -18,7 +18,11 @@ import {ButtonDemo} from '../button/button-demo';
 import {CardDemo} from '../card/card-demo';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {ChipsDemo} from '../chips/chips-demo';
-import {DatepickerDemo} from '../datepicker/datepicker-demo';
+import {
+  DatepickerDemo,
+  DemoMomentMonthYearDirective,
+  DemoMomentYearDirective
+} from '../datepicker/datepicker-demo';
 import {DemoMaterialModule} from '../demo-material-module';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
 import {DrawerDemo} from '../drawer/drawer-demo';
@@ -79,6 +83,8 @@ import {TableDemoModule} from '../table/table-demo-module';
     ChipsDemo,
     ContentElementDialog,
     DatepickerDemo,
+    DemoMomentMonthYearDirective,
+    DemoMomentYearDirective,
     DemoApp,
     DialogDemo,
     DrawerDemo,

src/demo-app/demo-material-module.ts

@@ -49,6 +49,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {PlatformModule} from '@angular/cdk/platform';
 import {ObserversModule} from '@angular/cdk/observers';
 import {PortalModule} from '@angular/cdk/portal';
+import {MatMomentDateModule} from '@angular/material-moment-adapter';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -88,6 +89,7 @@ import {PortalModule} from '@angular/cdk/portal';
     MatToolbarModule,
     MatTooltipModule,
     MatNativeDateModule,
+    MatMomentDateModule,
     CdkTableModule,
     A11yModule,
     BidiModule,

src/lib/datepicker/calendar.html

@@ -36,6 +36,7 @@
       [activeDate]="_activeDate"
       [selected]="selected"
       [dateFilter]="_dateFilterForViews"
+      (monthSelected)="_monthSelectedInYearView($event)"
       (selectedChange)="_goToDateInView($event, 'month')">
   </mat-year-view>
 
@@ -44,6 +45,7 @@
       [activeDate]="_activeDate"
       [selected]="selected"
       [dateFilter]="_dateFilterForViews"
+      (yearSelected)="_yearSelectedInMultiYearView($event)"
       (selectedChange)="_goToDateInView($event, 'year')">
   </mat-multi-year-view>
 </div>

src/lib/datepicker/calendar.spec.ts

@@ -196,6 +196,38 @@ describe('MatCalendar', () => {
       expect(testComponent.selected).toEqual(new Date(2017, JAN, 31));
     });
 
+    it('should emit the selected month on cell clicked in year view', () => {
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentView).toBe('year');
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+
+      expect(fixture.componentInstance.selectedMonth).toEqual(0);
+    });
+
+    it('should emit the selected year on cell clicked in multiyear view', () => {
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.selectedYear).toEqual(2017);
+    });
+
     it('should re-render when the i18n labels have changed',
       inject([MatDatepickerIntl], (intl: MatDatepickerIntl) => {
         const button = fixture.debugElement.nativeElement
@@ -916,10 +948,18 @@ describe('MatCalendar', () => {
 
 
 @Component({
-  template: `<mat-calendar [startAt]="startDate" [(selected)]="selected"></mat-calendar>`
+  template: `
+    <mat-calendar
+        [startAt]="startDate"
+        [(selected)]="selected"
+        (yearSelected)="selectedYear=$event"
+        (monthSelected)="selectedMonth=$event">
+    </mat-calendar>`
 })
 class StandardCalendar {
   selected: Date;
+  selectedYear: number;
+  selectedMonth: number;
   startDate = new Date(2017, JAN, 31);
 }
 

src/lib/datepicker/calendar.ts

@@ -107,6 +107,18 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   /** Emits when the currently selected date changes. */
   @Output() readonly selectedChange: EventEmitter<D> = new EventEmitter<D>();
 
+  /**
+   * Emits the year chosen in multiyear view.
+   * This doesn't imply a change on the selected date.
+   */
+  @Output() readonly yearSelected: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * Emits the month chosen in year view.
+   * This doesn't imply a change on the selected date.
+   */
+  @Output() readonly monthSelected: EventEmitter<number> = new EventEmitter<number>();
+
   /** Emits when any date is selected. */
   @Output() readonly _userSelection: EventEmitter<void> = new EventEmitter<void>();
 
@@ -228,6 +240,16 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
     }
   }
 
+  /** Handles year selection in the multiyear view. */
+  _yearSelectedInMultiYearView(year: number) {
+    this.yearSelected.emit(year);
+  }
+
+  /** Handles month selection in the year view. */
+  _monthSelectedInYearView(month: number) {
+    this.monthSelected.emit(month);
+  }
+
   _userSelected(): void {
     this._userSelection.emit();
   }

src/lib/datepicker/datepicker-content.html

@@ -8,5 +8,7 @@
     [dateFilter]="datepicker._dateFilter"
     [selected]="datepicker._selected"
     (selectedChange)="datepicker._select($event)"
+    (yearSelected)="datepicker._selectYear($event)"
+    (monthSelected)="datepicker._selectMonth($event)"
     (_userSelection)="datepicker.close()">
 </mat-calendar>