feat(#163): support for action buttons

README.md

@@ -65,6 +65,18 @@ imports: [
 </form>
 ```
 
+You can optionally add action buttons inside the `mat-datetimepicker`.
+
+```html
+<mat-datetimepicker ...>
+  <mat-datetimepicker-actions
+    [cancelButtonLabel]="'Cancel'"
+    [confirmButtonLabel]="'Confirm'"
+  >
+  </mat-datetimepicker-actions>
+</mat-datetimepicker>
+```
+
 ## Date formatting
 
 In order to change the default input/output formats, a custom instance of `MAT_DATETIME_FORMATS` needs to be provided in

projects/core/src/datetimepicker/calendar.html

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

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,45 @@
+import { Component, Input } from '@angular/core';
+
+import {
+  MatDatetimepickerComponent,
+  MatDatetimepickerContentComponent,
+} from './datetimepicker';
+
+@Component({
+  selector: 'mat-datetimepicker-actions',
+  templateUrl: 'datetimepicker-actions.component.html',
+  styleUrls: ['datetimepicker-actions.component.scss'],
+})
+export class MatDatetimepickerActionsComponent<D> {
+  @Input() protected confirmButtonLabel = 'Confirm';
+  @Input() protected cancelButtonLabel = 'Cancel';
+
+  private datetimepicker: MatDatetimepickerContentComponent<D>;
+
+  public fromTemplateWithDatetimepicker(
+    matDatetimepickerActions: MatDatetimepickerActionsComponent<D>,
+    datetimepickerContent: MatDatetimepickerContentComponent<D>
+  ) {
+    this.confirmButtonLabel = matDatetimepickerActions.confirmButtonLabel;
+    this.cancelButtonLabel = matDatetimepickerActions.cancelButtonLabel;
+    this.datetimepicker = datetimepickerContent;
+    datetimepickerContent._calendar._activeDate;
+  }
+
+  protected handleCancelButton(event): void {
+    event.preventDefault();
+    this.closeDatetimepicker();
+  }
+
+  protected handleConfirmButton(event): void {
+    event.preventDefault();
+    this.datetimepicker.datetimepicker._select(
+      this.datetimepicker._calendar._activeDate
+    );
+    this.closeDatetimepicker();
+  }
+
+  private closeDatetimepicker() {
+    this.datetimepicker.datetimepicker.close();
+  }
+}

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';
@@ -38,6 +39,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatDatetimepickerMonthViewComponent,
     MatDatetimepickerYearViewComponent,
     MatDatetimepickerMultiYearViewComponent,
+    MatDatetimepickerActionsComponent,
   ],
   exports: [
     MatDatetimepickerCalendarComponent,
@@ -50,6 +52,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<D>
+  ): void {
+    this.viewRef.clear();
+    const matDatetimepickerActionsComponent = this.viewRef.createComponent(
+      MatDatetimepickerActionsComponent
+    );
+    matDatetimepickerActionsComponent.instance.fromTemplateWithDatetimepicker(
+      matDatetimepickerActions,
+      this
+    );
+    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<D>>;
+
   /** 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';

src/app/date.component.html

@@ -25,14 +25,14 @@ <h2>
       required
     />
     <mat-error *ngIf="group.get('dateTime').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('dateTime').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('dateTime').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -58,14 +58,14 @@ <h2>
       placeholder="DateTime Year selector"
     />
     <mat-error *ngIf="group.get('dateTimeYear').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('dateTimeYear').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('dateTimeYear').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -107,8 +107,8 @@ <h2>
       placeholder="Time AM/PM"
     />
     <mat-error *ngIf="group.get('timeAMPM').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -190,14 +190,14 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
     <mat-error *ngIf="group.get('mintest').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('mintest').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('mintest').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <input
@@ -220,11 +220,11 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
     <mat-error *ngIf="group.get('filtertest').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('filtertest').errors?.matDatepickerFilter"
-      >filter</mat-error
-    >
+      >filter
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <input
@@ -268,4 +268,26 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
   </mat-form-field>
+  <mat-form-field>
+    <mat-datetimepicker-toggle
+      [for]="datetimePickerWithActions"
+      matSuffix
+    ></mat-datetimepicker-toggle>
+    <mat-datetimepicker
+      #datetimePickerWithActions
+      type="datetime"
+      openOnFocus="true"
+      timeInterval="5"
+    >
+      <mat-datetimepicker-actions></mat-datetimepicker-actions>
+    </mat-datetimepicker>
+    <input
+      matInput
+      formControlName="start"
+      [matDatetimepicker]="datetimePickerWithActions"
+      required
+      autocomplete="false"
+      placeholder="With Action Buttons"
+    />
+  </mat-form-field>
 </form>