向 mat-datepicker 添加自定义按钮答案

【问题标题】：Adding a custom button to mat-datepicker向 mat-datepicker 添加自定义按钮
【发布时间】：2022-10-07 20:34:00
【问题描述】：

我使用@angular/material - 10.2.7 版本。

<mat-datepicker-actions>
    <button mat-button matDatepickerCancel>Cancel</button>
    <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
</mat-datepicker-actions>

这个构造不起作用（不支持我的版本？）我该如何解决这个问题？

错误：

    'mat-datepicker-actions' is not a known element:
1. If 'mat-datepicker-actions' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-actions' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

【问题讨论】：

import {MatDatepickerModule} from '@angular/material/datepicker';
没用，可惜

标签： angular datepicker

【解决方案1】：

您需要将 MatDatepickerModule 导入到声明组件的模块中。

例如。如果您的组件是FormComponent 并且属于AppModule 模块，那么在app.module.ts 中，您必须：

import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  imports: [..., MatDatepickerModule],
  declarations: [..., FormComponent],
})
export class AppModule {}

当然，如果您还没有这样做，您需要先 npm install 材料库。

【讨论】：

【解决方案2】：

您需要将 datepicker 操作包装在 mat-date-range-picker 标记内。

所以它应该是这样的：

<mat-date-range-picker #yourRefHere>
    <mat-datepicker-actions>
        <button mat-button matDatepickerCancel>Cancel</button>
        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
</mat-date-range-picker>

【讨论】：