始终显示日期选择器中的日历 - Angular答案

【问题标题】：Always showing the calendar from datepicker - Angular始终显示日期选择器中的日历 - Angular
【发布时间】：2018-07-04 09:44:55
【问题描述】：

我需要让 Angular 中的日期选择器始终可见。日历将始终可见，不依赖按钮（不需要点击按钮）

example

来源.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

【问题讨论】：

标签： angular datepicker calendar angular-material2

【解决方案1】：

您可以为此使用mat-calendar：

<mat-calendar [selected]="selectedDate" (selectedChange)="selectedDate = $event"></mat-calendar>

【讨论】：

谢谢，但你能发布更好的例子吗？喜欢@Jacopo Sciampi 吗？我是 Angular 新手，我收到错误消息 - ng: Identifier 'selectedDate' is not defined。组件声明、模板变量声明和元素引用不包含这样的成员
@Alechandro 给你：stackblitz.com/edit/angular-mat-calendar
谢谢！我用你的想法。但是还有一个问题。如何将三个或四个日历彼此相邻添加
@Alechandro ：这是一个单独的问题，如果您需要更多帮助，您应该发布另一个问题。这可以通过多种方式完成。我已经更新了 stackblitz 并在这个例子中使用了 angular/flex-layout。

【解决方案2】：

您可以将opened="true" 添加到日期选择器。

你可以使用这样的代码：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker class="fixed-open" #picker opened="true"></mat-datepicker>
</mat-form-field>

工作示例：https://stackblitz.com/edit/angular-ysspzm?file=app%2Fdatepicker-overview-example.html

文档：https://material.angular.io/components/datepicker/api

【讨论】：

【解决方案3】：

您可以为此使用opened="true"。

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker opened="true"></mat-datepicker>
</mat-form-field>

【讨论】：