将页脚添加到 Angular 材料日期选择器

Question

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

在阅读API之后，似乎可以直接通过添加[calendarHeaderComponent]="myComponent"来自定义日期选择器的 header ，但没有添加或自定义页脚的选项。

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

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

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

Answer 1

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

最终结果将类似于：

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

Answer 2

上面的答案并没有说在使用renderer2和appendChild()向DatePicker或DateRangePicker添加额外元素后，它不会允许适当的键盘可访问性，因为额外添加的元素不会得到应有的焦点。 焦点被困在mat-calendar中，它使用cdkTrapFocus 。

从@angular-material v11.2.12 开始，可以自定义Confirmation Action Buttons 。 因此，不再需要使用renderer2和appendChild()来自定义页脚。

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

这是示例，都带有编辑的页脚和 header。

Answer 3

在我的工作中，我们做了类似的事情来为 datePicker 添加一个时间选择器。 您可以使用.appendChild()或.append()添加按钮。

思路是把append的一个组件放入datepicker中，我记得很好。 我在 angular 中还不够好，无法正确重现它，但这里是 stackblitz 概念的基本再现

此外，我发现在此处输入链接描述似乎符合您的需求。

希望能帮助到你 ！

Answer 4

对于较新的 Angular 版本，它是一个内置功能。 只需使用mat-datepicker-actions ditective。 活生生的例子

Answer 5

我使用mat-datepicker-actions解决了这个问题

<input class="form-control " title="Data" matInput [matDatepicker]="picker" formControlName="date">
          <mat-datepicker-toggle class=" my-auto" matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker>
            <mat-datepicker-actions class="">
              <button title="today" class="btn button" (click)="setTodayDate()" matDateRangePickerApply>
                [Hoje]
              </button>
            </mat-datepicker-actions>
          </mat-datepicker>

结果图像