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

时间:2017-10-16 11:36:41

标签: angular angular-material

我只是想问一下是否有人有使用Angular Material的<mat-calendar>的经验?我想要一个嵌套在我的html模板中的日历组件,而不是在单击按钮或某种切换时显示在弹出/模态中。 Material Datepicker似乎不支持此功能(除非我错过了)所以我认为我可以在表单中添加mat-calendar,然后知道有userSelected输出我可以&#34;听&#34;为此并运行一个方法来获取所选的值......

在我的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代码时,我可以看到输出&#34; userSelection&#34;返回void,因此我无法在那里获得所选的值,并且渲染的日历在美学上并不是很好,并且需要一些广泛的CSS工作。我只是很想知道是否有人之前已经开始研究这个问题,并且可以说明我如何从垫子日历中获得所选值(即所选日期) - 这可以节省我一些时间,同时我查看文档。任何建议将不胜感激。

1 个答案:

答案 0 :(得分:4)

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

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