Как добавить кнопку закрытия в настраиваемый заголовок mat-datepicker

Я использую этот компонент пользовательского интерфейса из углового материала.

https://material.angular.io/components/datepicker/overview

Я хочу добавить кнопку закрытия пользовательского заголовка, но это пока невозможно.

По крайней мере, я хотел бы получить выходное событие из компонента заголовка выбора даты.

Источник

3 ответа

Решение

Как MatDatepicker а также MatCalendarHeader два отдельных компонента, вам нужно будет передавать данные между компонентами, используя EventEmitterили с BehaviourSubject через использование службы.

Для этого примера я буду использовать сервис. Во-первых, вы можете создать службу под названием calendar-service.ts, который будет использоваться для обмена данными между компонентами. В этом классе мы будем использовать BehaviourSubject для выдачи обновленного логического значения, которое будет указывать, должен ли указатель даты быть открытым или закрытым.

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)
  }

}

На шаблоне для вашего MatCalendarHeader, вы должны добавить кнопку, которая привязана к событию щелчка, которая будет вызывать действие, чтобы закрыть DatePicker

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

И на component.ts для заголовка,

constructor(
  private calendarService: CalendarService) {
}

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

На основной компонент, который использует MatDatepicker, вы подпишетесь на наблюдаемую, которая будет излучать текущее значение из компонента заголовка.

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

constructor(private calendarService: CalendarService) {}

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

Я создал полное демо здесь.

Источник

Думаю, вам стоит взглянуть на этот пример. Вы сможете заставить его работать безcalendarService. В основном вы можете удерживать родительский компонент выбора даты в конструкторе:

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());
  }

Я использую его с кнопкой сегодня в HTML:

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

Затем вызывается метод и this.datePicker.close() закроет всплывающий календарь:

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

Предоставлено оригинальным создателем: @tabuckner

Источник

Наткнулся на это и решил поделиться тем, что нашел.

В соответствии с этой проблемой github была добавлена ​​вилка, чтобы вы могли использовать компонент в качестве оболочки, и поэтому вы получите все полезные функции компонента.

Чтобы использовать это, ваш шаблон так же прост, как

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

Вот ссылка на мой stackblitz с примером: https://stackblitz.com/edit/mat-datepicker-today-button?file=src/main.ts

Источник
Другие вопросы по тегам