html - Adicionar Rodapé ao Datepicker do Angular Material

Estou tentando implementar um botão "Hoje" no seletor de datas do Angular Material, mas ele deve ser posicionado após o conteúdo.

Após ler a API, parece que, embora seja simples personalizar o cabeçalho do seletor de datas adicionando [calendarHeaderComponent]="myComponent", não há opções para adicionar ou personalizar um rodapé.

Atualmente, estou tentando fazê-lo funcionar em cima do exemplo de cabeçalho personalizado:

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

Além disso, parece que, neste caso, uma funcionalidade semelhante é proposta.

Resposta #1

Com as versões mais recentes do Angular, é um recurso integrado. Basta usar a diretiva mat-datepicker-actions. Exemplo ao vivo

Resposta #2

As respostas acima não dizem que, após adicionar elementos extras ao DatePicker ou DateRangePicker usando renderer2 e appendChild(), não será permitido acesso adequado via teclado, pois os elementos extras adicionados não receberão foco como deveriam. O foco fica preso dentro do mat-calendar, que usa o cdkTrapFocus.

Desde @angular-material v11.2.12 há a possibilidade de personalizar os Botões de Ação de Confirmação. Devido a isso, não é mais necessário o uso de renderer2 e appendChild() para personalizar o rodapé.

Junto com os Botões de Ação de Confirmação e a Personalização do cabeçalho do calendário, é possível adicionar botões extras, rótulos, textos etc. ao cabeçalho e ao rodapé.

Aqui está o exemplo, tanto com rodapé quanto com cabeçalho editados.