html - Legg til bunntekst i Angular Material-datovelger

Jeg prøver å implementere en "I dag"-knapp på Angular Material-datovelgeren, men den må plasseres etter innholdet.

Etter å ha lest API-en, ser det ut til at selv om det er enkelt å tilpasse overskriften til datovelgeren ved å legge til [calendarHeaderComponent]="myComponent", finnes det ingen muligheter for å legge til eller tilpasse en bunntekst.

Jeg prøver for øyeblikket å få det til å fungere på toppen av eksemplet med egendefinert overskrift:

https://stackblitz.com/edit/angular-3xdhb1?file=src/app/datepicker-custom-header-example.ts

Det ser også ut til at i dette tilfellet foreslås en lignende funksjon.

Svar #1

Med nyere versjoner av Angular er det en innebygd funksjon. Bare bruk mat-datepicker-actions-direktivet. Live eksempel

Svar #2

Ovennevnte svar sier ikke at etter å ha lagt til ekstra elementer i DatePicker eller DateRangePicker ved bruk av renderer2 og appendChild(), vil det ikke tillate tilstrekkelig tastaturtilgjengelighet siden de ekstra elementene som legges til, ikke får fokus slik de skal. Fokuset blir fanget inne i mat-calendar, som bruker cdkTrapFocus.

Siden @angular-material v11.2.12 er det mulig å tilpasse Bekreftelses-handlingsknapper. På grunn av dette er det ikke lenger nødvendig å bruke renderer2 og appendChild() for å tilpasse bunnteksten.

Sammen med Bekreftelses-handlingsknapper og Tilpassing av kalenderhodet er det mulig å legge til ekstra knapper, etiketter, tekster osv. i headeren og footeren.

Her er eksemplet, både med redigert bunntekst og topptekst.