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

Question

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

源.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>

- user10026373

Answer 1

你可以使用mat-calendar来实现这个功能：

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

- Tim Martens

---

谢谢，但你能发一个更好的例子吗？像@Jacopo Sciampi那样的？我是Angular的新手，我遇到了错误- ng：标识符“selectedDate”未定义。组件声明、模板变量声明和元素引用中都没有这样的成员。 - user10026373

@Alechandro，这是链接：https://stackblitz.com/edit/angular-mat-calendar - Tim Martens

谢谢！我使用了你的想法。但是还有一个问题，我该如何将三个或四个日历并排添加？ - user10026373

@Alechandro ：这是一个独立的问题，如果你需要更多帮助，应该发布另一个问题。这可以用多种方式完成。我已经更新了 stackblitz 并在此示例中使用了 angular/flex-layout。 - Tim Martens

Answer 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

- Jacopo Sciampi

Answer 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>

- Krishna Rathore