将页脚添加到 Angular Material Datepicker

Posted 2023-03-13

【中文标题】将页脚添加到 Angular Material Datepicker

【英文标题】：Add Footer to Angular Material Datepicker

【发布时间】：2020-08-24 06:45:18

【问题描述】：

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

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

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

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

另外，好像this issue中也提出了类似的特性。

【参考方案1】：

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

最终结果将类似于：

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

【参考方案2】：

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

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

与 Confirmation Action Buttons 和 Customizing the calendar header 一起，可以在页眉和页脚中添加额外的按钮、标签、文本等。

这里是 example，带有已编辑的页脚和页眉。

【参考方案3】：

对于较新的 Angular 版本，它是一个内置功能。只需使用mat-datepicker-actions 注释即可。 Live example

【参考方案4】：

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

这个想法是在日期选择器中添加一个组件，我记得很清楚。我的角度不够好，无法正确重现它，但在这里is a basic repro of the concept on stackblitz

另外，我发现 enter link description here 似乎可以满足您的需求。

希望对你有帮助！

【讨论】：

似乎虽然这可行，但我更喜欢以更清洁的方式进行。我暂时保留这个问题。

@AlbertoRivera 我很确定没有干净的方法来修改外部组件。如果你找到什么让我知道我很感兴趣 :)

接受这个答案，因为它是我实际实施的指南。谢谢！

【参考方案5】：

我使用 ma​​t-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>

result image