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

问题

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/57439033/how-to-add-close-button-to-customized-mat-datepicker-header

标签

angular

angular-material

mat-datepicker