refactor (MatCalendarHeader): fix some styling issues

Author: Tobias Schweizer

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

@@ -40,7 +40,8 @@ <h2>Options</h2>
 </p>
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="customCalendarHeaderPicker" placeholder="Custom calendar header"
+    <mat-label>Custom calendar header</mat-label>
+    <input matInput [matDatepicker]="customCalendarHeaderPicker"
            [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="customCalendarHeaderPicker"></mat-datepicker-toggle>
     <mat-datepicker #customCalendarHeaderPicker [touchUi]="touch" [disabled]="datepickerDisabled" [calendarHeaderComponent]="customHeader"></mat-datepicker>

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

@@ -52,10 +52,10 @@ export class DatepickerDemo {
   template: `
       <div>
         <button (click)="previousClicked('year')">&lt;&lt;</button>
-          <button (click)="previousClicked('month')">&lt;</button>
+        <button (click)="previousClicked('month')">&lt;</button>
         {{periodLabel}}
         <button (click)="nextClicked('month')">&gt;</button>
-          <button (click)="nextClicked('year')">&gt;&gt;</button>
+        <button (click)="nextClicked('year')">&gt;&gt;</button>
       </div>
   `
 })
@@ -71,19 +71,13 @@ export class CustomHeader {
 
   previousClicked(mode: 'month' | 'year') {
     this.calendar.activeDate = mode == 'month' ?
-            this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
-            this._dateAdapter.addCalendarYears(
-                    this.calendar.activeDate,
-                    -1
-            );
+        this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
+            this._dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
   }
 
   nextClicked(mode: 'month' | 'year') {
     this.calendar.activeDate = mode == 'month' ?
-            this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
-            this._dateAdapter.addCalendarYears(
-                    this.calendar.activeDate,
-                    1
-            );
+        this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
+            this._dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
   }
 }

src/lib/datepicker/calendar.ts

@@ -52,32 +52,31 @@ export class MatCalendarHeader implements OnDestroy {
               @Optional() private _dateAdapter: DateAdapter<any>,
               @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
               changeDetectorRef: ChangeDetectorRef) {
-    _intl.changes.pipe(takeUntil(this._destroyed)).subscribe(
-            () => changeDetectorRef.markForCheck()
-    );
+    _intl.changes.pipe(takeUntil(this._destroyed))
+        .subscribe(() => changeDetectorRef.markForCheck());
   }
 
   /** The label for the current calendar view. */
   get periodButtonText(): string {
     if (this.calendar.currentView == 'month') {
       return this._dateAdapter
-              .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
-              .toLocaleUpperCase();
+          .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
+          .toLocaleUpperCase();
     }
     if (this.calendar.currentView == 'year') {
       return this._dateAdapter.getYearName(this.calendar.activeDate);
     }
     const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
     const firstYearInView = this._dateAdapter.getYearName(
-            this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
+        this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
     const lastYearInView = this._dateAdapter.getYearName(
-            this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
+        this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
     return `${firstYearInView} \u2013 ${lastYearInView}`;
   }
 
   get periodButtonLabel(): string {
     return this.calendar.currentView == 'month' ?
-            this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
+        this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
   }
 
   /** The label for the the previous button. */
@@ -106,19 +105,18 @@ export class MatCalendarHeader implements OnDestroy {
   /** Handles user clicks on the previous button. */
   previousClicked(): void {
     this.calendar.activeDate = this.calendar.currentView == 'month' ?
-            this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
+        this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
             this._dateAdapter.addCalendarYears(
-                    this.calendar.activeDate,
-                    this.calendar.currentView == 'year' ? -1 : -yearsPerPage
+                this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage
             );
   }
 
   /** Handles user clicks on the next button. */
   nextClicked(): void {
     this.calendar.activeDate = this.calendar.currentView == 'month' ?
-            this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
+        this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
             this._dateAdapter.addCalendarYears(
-                    this.calendar.activeDate,
+                this.calendar.activeDate,
                     this.calendar.currentView == 'year' ? 1 : yearsPerPage
             );
   }
@@ -129,13 +127,13 @@ export class MatCalendarHeader implements OnDestroy {
       return true;
     }
     return !this.calendar.minDate ||
-            !this.calendar.isSameView(this.calendar.activeDate, this.calendar.minDate);
+        !this.calendar.isSameView(this.calendar.activeDate, this.calendar.minDate);
   }
 
   /** Whether the next period button is enabled. */
   nextEnabled(): boolean {
     return !this.calendar.maxDate ||
-            !this.calendar.isSameView(this.calendar.activeDate, this.calendar.maxDate);
+        !this.calendar.isSameView(this.calendar.activeDate, this.calendar.maxDate);
   }
 
   ngOnDestroy() {