feat(#163): support for action buttons

projects/core/src/datetimepicker/calendar.html

@@ -144,4 +144,5 @@
     [twelvehour]="twelvehour"
   >
   </mat-datetimepicker-clock>
+  <ng-content></ng-content>
 </div>

projects/core/src/datetimepicker/calendar.scss

@@ -29,69 +29,69 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     width: 150px;
     min-width: 150px;
   }
-}
 
-.mat-datetimepicker-calendar-header-year,
-.mat-datetimepicker-calendar-header-date-time {
-  width: 100%;
-  font-weight: 500;
-  white-space: nowrap;
-}
+  .mat-datetimepicker-calendar-header-year,
+  .mat-datetimepicker-calendar-header-date-time {
+    width: 100%;
+    font-weight: 500;
+    white-space: nowrap;
+  }
 
-.mat-datetimepicker-calendar-header-year {
-  font-size: 16px;
+  .mat-datetimepicker-calendar-header-year {
+    font-size: 16px;
 
-  mat-icon {
-    transform: translateY(5px);
+    mat-icon {
+      transform: translateY(5px);
+    }
   }
-}
 
-.mat-datetimepicker-calendar-header-date-time {
-  font-size: 30px;
-  line-height: 34px;
+  .mat-datetimepicker-calendar-header-date-time {
+    font-size: 30px;
+    line-height: 34px;
 
-  [mode='landscape'] & {
-    white-space: normal;
-    word-wrap: break-word;
+    [mode='landscape'] & {
+      white-space: normal;
+      word-wrap: break-word;
+    }
   }
-}
-
-.mat-datetimepicker-calendar-header-ampm-container {
-  font-size: 0.77em;
-}
 
-.mat-datetimepicker-calendar-header-year,
-.mat-datetimepicker-calendar-header-date,
-.mat-datetimepicker-calendar-header-hours,
-.mat-datetimepicker-calendar-header-minutes,
-.mat-datetimepicker-calendar-header-ampm {
-  &:not(.active) {
-    cursor: pointer;
-    opacity: 0.6;
+  .mat-datetimepicker-calendar-header-ampm-container {
+    font-size: 0.77em;
   }
 
-  &.not-clickable {
-    cursor: initial;
+  .mat-datetimepicker-calendar-header-year,
+  .mat-datetimepicker-calendar-header-date,
+  .mat-datetimepicker-calendar-header-hours,
+  .mat-datetimepicker-calendar-header-minutes,
+  .mat-datetimepicker-calendar-header-ampm {
+    &:not(.active) {
+      cursor: pointer;
+      opacity: 0.6;
+    }
+
+    &.not-clickable {
+      cursor: initial;
+    }
   }
-}
 
-.mat-datetimepicker-calendar-header-time {
-  padding-left: 8px;
+  .mat-datetimepicker-calendar-header-time {
+    padding-left: 8px;
 
-  &:not(.active) {
-    opacity: 0.6;
+    &:not(.active) {
+      opacity: 0.6;
 
-    .mat-datetimepicker-calendar-header-hours,
-    .mat-datetimepicker-calendar-header-minutes,
-    .mat-datetimepicker-calendar-header-ampm {
-      cursor: pointer;
-      opacity: 1;
+      .mat-datetimepicker-calendar-header-hours,
+      .mat-datetimepicker-calendar-header-minutes,
+      .mat-datetimepicker-calendar-header-ampm {
+        cursor: pointer;
+        opacity: 1;
+      }
     }
-  }
 
-  [mode='landscape'] & {
-    display: block;
-    padding-left: 0;
+    [mode='landscape'] & {
+      display: block;
+      padding-left: 0;
+    }
   }
 }
 

projects/core/src/datetimepicker/datetimepicker-actions.component.html

@@ -0,0 +1,18 @@
+<div class="mat-datetimepicker-actions">
+  <button
+    mat-button
+    color="primary"
+    type="button"
+    (click)="handleCancelButton($event)"
+  >
+    {{ cancelButtonLabel }}
+  </button>
+  <button
+    mat-raised-button
+    color="primary"
+    type="button"
+    (click)="handleConfirmButton($event)"
+  >
+    {{ confirmButtonLabel }}
+  </button>
+</div>

projects/core/src/datetimepicker/datetimepicker-actions.component.scss

@@ -0,0 +1,4 @@
+.mat-datetimepicker-actions {
+  display: flex;
+  justify-content: flex-end;
+}

projects/core/src/datetimepicker/datetimepicker-actions.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+
+import { MatDatetimepickerComponent } from './datetimepicker';
+
+@Component({
+  selector: 'mat-datetimepicker-actions',
+  templateUrl: 'datetimepicker-actions.component.html',
+  styleUrls: ['datetimepicker-actions.component.scss'],
+})
+export class MatDatetimepickerActionsComponent {
+  @Input() protected confirmButtonLabel = 'Confirm';
+  @Input() protected cancelButtonLabel = 'Cancel';
+
+  private datetimepicker: MatDatetimepickerComponent<any>;
+
+  public fromTemplateWithDatetimepicker(
+    matDatetimepickerActions: MatDatetimepickerActionsComponent,
+    datetimepicker: MatDatetimepickerComponent<any>
+  ) {
+    this.confirmButtonLabel = matDatetimepickerActions.confirmButtonLabel;
+    this.cancelButtonLabel = matDatetimepickerActions.cancelButtonLabel;
+    this.datetimepicker = datetimepicker;
+  }
+
+  protected handleCancelButton(event): void {
+    event.preventDefault();
+    this.datetimepicker.close();
+  }
+
+  protected handleConfirmButton(event): void {
+    event.preventDefault();
+    // TODO: We need a "temporary" value from the input at this point
+    // TODO 2: The datetimepicker should not close itself after having everything selected
+    // this.datetimepicker._select(this.datetimepicker._selected)
+  }
+}

projects/core/src/datetimepicker/datetimepicker-content.html

@@ -22,4 +22,5 @@
   cdkTrapFocus
   class="mat-typography"
 >
+  <ng-template #matDatetimepickerActions></ng-template>
 </mat-datetimepicker-calendar>

projects/core/src/datetimepicker/datetimepicker-content.scss

@@ -5,8 +5,8 @@ $mat-datetimepicker-calendar-cell-size: 40px;
 $mat-datetimepicker-calendar-portrait-width: $mat-datetimepicker-calendar-cell-size *
   7 + $mat-datetimepicker-calendar-padding * 2;
 $mat-datetimepicker-calendar-landscape-width: 446px;
-$mat-datetimepicker-calendar-portrait-height: 405px;
 $mat-datetimepicker-calendar-landscape-height: 328px;
+$mat-datetimepicker-calendar-portrait-height: 405px;
 
 .mat-datetimepicker-content {
   @include mat.elevation(8);

projects/core/src/datetimepicker/datetimepicker.module.ts

@@ -10,6 +10,7 @@ import {
   MatDatetimepickerComponent,
   MatDatetimepickerContentComponent,
 } from './datetimepicker';
+import { MatDatetimepickerActionsComponent } from './datetimepicker-actions.component';
 import { MatDatetimepickerInputDirective } from './datetimepicker-input';
 import { MatDatetimepickerToggleComponent } from './datetimepicker-toggle';
 import { MatDatetimepickerMonthViewComponent } from './month-view';
@@ -39,6 +40,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatDatetimepickerMonthViewComponent,
     MatDatetimepickerYearViewComponent,
     MatDatetimepickerMultiYearViewComponent,
+    MatDatetimepickerActionsComponent,
   ],
   exports: [
     MatDatetimepickerCalendarComponent,
@@ -51,6 +53,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatDatetimepickerMonthViewComponent,
     MatDatetimepickerYearViewComponent,
     MatDatetimepickerMultiYearViewComponent,
+    MatDatetimepickerActionsComponent,
   ],
 })
 export class MatDatetimepickerModule {}

projects/core/src/datetimepicker/datetimepicker.ts

@@ -14,13 +14,15 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentRef,
+  ContentChildren,
   EventEmitter,
   Inject,
   Input,
   NgZone,
   OnDestroy,
   Optional,
   Output,
+  QueryList,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
@@ -29,7 +31,7 @@ import { MAT_DATEPICKER_SCROLL_STRATEGY } from '@angular/material/datepicker';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject, Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { DatetimeAdapter } from '../adapter/datetime-adapter';
+import { DatetimeAdapter } from '../adapter';
 import {
   MatCalendarView,
   MatDatetimepickerCalendarComponent,
@@ -38,6 +40,7 @@ import { createMissingDateImplError } from './datetimepicker-errors';
 import { MatDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MatDatetimepickerInputDirective } from './datetimepicker-input';
 import { MatDatetimepickerType } from './datetimepicker-type';
+import { MatDatetimepickerActionsComponent } from './datetimepicker-actions.component';
 
 export type MatDatetimepickerMode = 'auto' | 'portrait' | 'landscape';
 
@@ -69,10 +72,30 @@ export class MatDatetimepickerContentComponent<D> implements AfterContentInit {
   @ViewChild(MatDatetimepickerCalendarComponent, { static: true })
   _calendar: MatDatetimepickerCalendarComponent<D>;
 
+  @ViewChild('matDatetimepickerActions', {
+    read: ViewContainerRef,
+    static: true,
+  })
+  private viewRef: ViewContainerRef;
+
   ngAfterContentInit() {
     this._calendar._focusActiveCell();
   }
 
+  public renderActions(
+    matDatetimepickerActions: MatDatetimepickerActionsComponent
+  ): void {
+    this.viewRef.clear();
+    const matDatetimepickerActionsComponent = this.viewRef.createComponent(
+      MatDatetimepickerActionsComponent
+    );
+    matDatetimepickerActionsComponent.instance.fromTemplateWithDatetimepicker(
+      matDatetimepickerActions,
+      this.datetimepicker
+    );
+    matDatetimepickerActionsComponent.changeDetectorRef.detectChanges();
+  }
+
   onSelectionChange(date: D) {
     this.datetimepicker._select(date);
     this.datetimepicker.close();
@@ -99,7 +122,12 @@ export class MatDatetimepickerContentComponent<D> implements AfterContentInit {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class MatDatetimepickerComponent<D> implements OnDestroy {
+export class MatDatetimepickerComponent<D>
+  implements AfterContentInit, OnDestroy
+{
+  @ContentChildren(MatDatetimepickerActionsComponent)
+  private actions: QueryList<MatDatetimepickerActionsComponent>;
+
   /** Active multi year view when click on year. */
   @Input() multiYearSelector: boolean = false;
   /** if true change the clock to 12 hour format. */
@@ -166,6 +194,12 @@ export class MatDatetimepickerComponent<D> implements OnDestroy {
     }
   }
 
+  ngAfterContentInit(): void {
+    if (this.actions.length > 1) {
+      throw Error('Cannot have more than one actions children!');
+    }
+  }
+
   private _startAt: D | null;
 
   /** The date to open the calendar to initially. */
@@ -315,11 +349,13 @@ export class MatDatetimepickerComponent<D> implements OnDestroy {
     if (this.opened || this.disabled) {
       return;
     }
+
     if (!this._datepickerInput) {
       throw Error(
         'Attempted to open an MatDatepicker with no associated input.'
       );
     }
+
     if (this._document) {
       this._focusedElementBeforeOpen = this._document.activeElement;
     }
@@ -380,6 +416,8 @@ export class MatDatetimepickerComponent<D> implements OnDestroy {
     });
     this._dialogRef.afterClosed().subscribe(() => this.close());
     this._dialogRef.componentInstance.datetimepicker = this;
+
+    this.attachActionsIfPresent(this._dialogRef.componentInstance);
   }
 
   /** Open the calendar as a popup. */
@@ -399,6 +437,8 @@ export class MatDatetimepickerComponent<D> implements OnDestroy {
         this._popupRef.attach(this._calendarPortal);
       componentRef.instance.datetimepicker = this;
 
+      this.attachActionsIfPresent(componentRef.instance);
+
       // Update the position once the calendar has rendered.
       this._ngZone.onStable
         .asObservable()
@@ -461,4 +501,12 @@ export class MatDatetimepickerComponent<D> implements OnDestroy {
         },
       ]);
   }
+
+  private attachActionsIfPresent(
+    componentInstance: MatDatetimepickerContentComponent<D>
+  ) {
+    if (this.actions.length === 1) {
+      componentInstance.renderActions(this.actions.get(0));
+    }
+  }
 }

projects/core/src/datetimepicker/index.ts

@@ -3,6 +3,7 @@ export * from './clock';
 export * from './calendar';
 export * from './calendar-body';
 export * from './datetimepicker';
+export * from './datetimepicker-actions.component';
 export * from './datetimepicker-filtertype';
 export * from './datetimepicker-input';
 export * from './datetimepicker-toggle';