How to add close button to customized mat-datepicker-header

Question

I am using this UI component from the Angular material.

https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header

I want to add close button the custom header but it seems not possible yet.

At least I would like to get output event from the date picker header component.

Answer 1

As the MatDatepicker and MatCalendarHeader are two separate components, you will need to pass data between the components using an EventEmitter, or with BehaviourSubject through the use of a service.

For this example, I will make use of a service. First, you may create a service called calendar-service.ts, which will be used to share data between components. Within this class, we will make use of BehaviourSubject to emit the updated boolean value which will denote if the datepicker should be open or close.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class CalendarService {

  closeCalendarSource = new BehaviorSubject<boolean>(false);
  isCloseCalander = this.closeCalendarSource.asObservable();

  constructor() { }

  closeCalander(message: boolean) {
    this.closeCalendarSource.next(message)
  }

}

On the template for your MatCalendarHeader, you should add a button which is binded to the click event, which will trigger the action to close the datepicker

<button mat-icon-button (click)="closeCalendar()" >
  <mat-icon>close</mat-icon>
</button>

And on the component.ts for the header,

constructor(
  private calendarService: CalendarService) {
}

closeCalendar() {
  this.calendarService.closeCalander(true);
}

On the main component that uses the MatDatepicker, you will subscribe to the observable which will emit the current value from the header component.

@ViewChild('picker', { static: false}) picker;
exampleHeader = ExampleHeader;

constructor(private calendarService: CalendarService) {}

ngOnInit() {
  this.calendarService.isCloseCalander.subscribe(isClose => {
    if (isClose) {
      this.picker.close();
    }
  });
}

I have created the full demo over here.

Answer 2

I think you should have a look at this example. You should be able to get it working without the calendarService. Basically you can grab a hold of the parent date picker component in the constructor:

constructor(
    private datePicker: MatDatepicker<D>,
    private calendar: MatCalendar<D>,
    private dateAdapter: DateAdapter<D>,
    @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
    cdr: ChangeDetectorRef,
  ) {
    this.calendar.stateChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => cdr.markForCheck());
  }

I'm using it with a today button in the HTML:

<button
    mat-icon-button
    class="todayButton"
    (click)="todayClicked()"
    matTooltip="Select today"
  >
    {{ today }}
  </button>

Then the method is called and the this.datePicker.close() will close the calendar pop up:

todayClicked() {
    this.calendar.activeDate = this.dateAdapter.today();
    this.calendar._dateSelected(this.calendar.activeDate);
    this.datePicker.select(this.dateAdapter.today());
    this.datePicker.close();
  }

Courtesy of the original creator: @tabuckner

Answer 3

Came across this and thought I would share what I found.

According to this github issue, there was a fork added so that you can use the component as a wrapper and as such, you will be getting all the neat functionality of the component.

To utilize this, your template is as simple as

<mat-calendar-header>
  <button>TODAY</button>
</mat-calendar-header>

Here is a link to my stackblitz with the example: https://stackblitz.com/edit/mat-datepicker-today-button?file=src/main.ts