将页脚添加到 Angular Material Datepicker

Question

我正在尝试在 Angular Material 日期选择器上实现一个“今天”按钮，但它必须位于内容之后。

阅读API 后，似乎虽然通过添加自定义日期选择器的标题很简单[calendarHeaderComponent]="myComponent"，但没有添加或自定义页脚的选项。

我目前正在尝试使其在自定义标题示例之上工作：

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

此外，似乎在这个 issue 中，提出了类似的功能。

Answer 1

我最终调整了另一个答案。我对实现不太满意，但它的工作原理不太复杂。另一个功能是正确选择日期选择器以将按钮附加到（因为可能有多个）。

最终结果将类似于：

https://stackblitz.com/edit/angular-c9xqse-pnrpgw

Answer 2

上面的答案并没有说在使用and添加额外的元素到DatePicker或DateRangePicker后，它不会允许适当的键盘可访问性，因为额外添加的元素不会像他们应该的那样获得焦点。焦点被困在里面，它使用.renderer2appendChild()mat-calendarcdkTrapFocus

从@angular-material v11.2.12开始，可以自定义确认操作按钮。因此，不再需要使用renderer2和appendChild()来自定义页脚。

与确认操作按钮和自定义日历标题一起，可以向页眉和页脚添加额外的按钮、标签、文本等。

这是示例，其中页脚和页眉均经过编辑。