Angular добавить тумблер внутри календаря DatePicker

Question

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

<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()">
  <div class="input-wrapper">
    <mat-form-field>
      <input
        id="date"
        name="date"
        [disabled]="datePickerDisabled || uploadForm.submitted"
        [matDatepicker]="datepicker"
        placeholder="Expiration date"
        autocomplete="off"
        matInput
        required />
      <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
      <mat-datepicker touchUi #datepicker></mat-datepicker>
    </mat-form-field>
    <div class="tooltip">This field is required.</div>
    <mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Show Date Details</mat-slide-toggle>  
  </div>
</form>

Answer 1

Я думаю, что у вас есть два подхода

1.-Настройте заголовок, см. Документы: Настройка заголовка

Из этого ТА ответа, повторить заголовок:

/** Custom header component for datepicker. */
@Component({
  selector: 'example-header',
  template: `
<mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Show Date Details</mat-slide-toggle> 
  <div class="mat-calendar-controls">
    <button mat-button type="button" class="mat-calendar-period-button"
            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
            cdkAriaLive="polite">
      {{periodButtonText}}
      <div class="mat-calendar-arrow"
           [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
    </button>

    <div class="mat-calendar-spacer"></div>

    <ng-content></ng-content>

    <button mat-icon-button type="button" class="mat-calendar-previous-button"
            [disabled]="!previousEnabled()" (click)="previousClicked()"
            [attr.aria-label]="prevButtonLabel">
    </button>

    <button mat-icon-button type="button" class="mat-calendar-next-button"
            [disabled]="!nextEnabled()" (click)="nextClicked()"
            [attr.aria-label]="nextButtonLabel">
    </button>
  </div>
</div>  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleHeader extends MatCalendarHeader<any> {

  /** Handles user clicks on the period label. */
  currentPeriodClicked(): void {
    this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';
  }
}

(измените. html, чтобы добавить нужные элементы управления)

2. -Вложите средство выбора даты в меню, как показано в это еще один SO-ответ

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

@Injectable({
  providedIn: "root"
})
export class CalendarService {
  private _event = new Subject<void>();
  public onEvent = this._event as Observable<any>;
  constructor() {}

  command(value: any) {
    this._event.next(value);
  }
}

. Вы можете добавить сервис в конструктор customHeader

constructor(
    private _calendar: MatCalendar<D>,
    private _dateAdapter: DateAdapter<D>,
    @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
    cdr: ChangeDetectorRef,
    private service: CalendarService
  )

Тогда, если наш toogle вызов функции

<mat-slide-toggle #toogle (change)="toogleChange($event)">
    Show Date Details
</mat-slide-toggle>

Функция становится похожей на

  toogleChange(event: any) {
    this.service.command(event);
  }

Просто в ngOnInit в компоненте подписаться на сервис

ngOnInit() {
    this.service.onEvent.subscribe(res => {
      console.log(res.checked);
    });
  }

Вы можете видеть в stackblitz