从 Angular Material 的 mat-calendar 或在组件中渲染 mat-datepicker 获取用户选择的值

Question

我只是想问是否有人有使用 Angular Material 的 <mat-calendar> 的经验？我想要一个嵌套在我的 html 模板中的日历组件，而不是在单击按钮或某种切换时显示在 Popup / Modal 中。 Material Datepicker 似乎不支持这一点（除非我错过了）所以我想我可以在我的表单中添加一个mat-calendar，然后知道有一个userSelected 输出我可以“听”并运行获取选定值的方法...

在我的 HTML 中...

<div>
    Select a day:
    <mat-calendar #myDate (userSelection)="getChangedValue($event)"></mat-calendar>
<div>

在我的组件中

getChangedValue(e)  {
    console.log(e); // this is always "undefined"
  }

但是，在查看mat-calendar 代码时，我可以看到输出“userSelection”返回 void，因此我无法在此处获取选定的值，并且渲染的日历在美学上不是很好，需要大量的 CSS 工作。我只是想知道是否有人以前做过这方面的工作，并且可以阐明如何从 mat-calendar 中获取选定的值（即选定的日期）——这可能会在我浏览文档时为我节省一些时间.任何建议将不胜感激。

Answer 1

通过研究 Angular Material 存储库的代码，选择的日期通过名为 selectedChange 的输出公开。我可以使用它来获取日期，例如：

<mat-calendar #myDate (selectedChange)="getChangedValue($event)"></mat-calendar>