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.

Daugherty

Hmm... What do you mean by you can't add the close button..? The button does not work? Or does the button not show at all – Cumber

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.

Cumber

ok but what if you want multiple instances of said custom MatDatePickerComponent ? They will share data from a same single instance of CalendarService. It is not scoped-safe and can lead to major side effects. Of course your example works for the sake of a tutorial in which you will declare a mat-date-picker only once, but not for production apps with multiple date pickers (for instance a large form with 3 different datepickers for birthday + spouse birthday + subscription date). – Gesture

@SaadBenbouzid I think you can solve that by providing the service component level. #51775518 – Nigrify

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

Undersize

only answer that follows the docs - but such a ridiculous solution - +1 anyway its not your fault ;) – Annuitant

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

Kilah