即使从日历中选择日期，如何保持 mat-datepicker 日历打开？

Posted 2023-03-06

【中文标题】即使从日历中选择日期，如何保持 mat-datepicker 日历打开？

【英文标题】：How to keep mat-datepicker calender open, even after selecting a date from calendar?

【发布时间】：2018-07-13 08:37:32

【问题描述】：

我想让mat-datepicker 在特定的 div 中保持打开状态。我使用了opened=true 属性，但在选择日期后它会关闭。

【问题讨论】：

如果你能提供一个可能有帮助的 stackblitz 示例

你可以查看这个。stackblitz.com/edit/…

您找到解决问题的方法了吗？

【参考方案1】：

这应该适合你：

将此添加到您的input

(click)="_openCalendar(picker)"
#keepOpen

这个给你的mat-datepicker

(closed)="_openCalendar(picker)"

这是你的打字稿：

@ViewChild('keepOpen') _input: ElementRef;

_openCalendar(picker: MatDatepicker<Date>) 
  picker.open();

别忘了导入ViewChild 和ElementRef

这是我在 Stackblitz 上的工作示例

【讨论】：

感谢您的回复。它保持日历打开 :) 但是当我滚动页面时，日历在特定的 DIV 中没有固定，它正在上下移动。我们可以修复它特别是 div 像输入框和其他东西是固定的吗？

再次...如果你能提供一个关于 stackblitz 的示例，可能会让任何人更容易提供帮助

我认为您正在寻找 display: fix 而不是 block（在 css 中）。这将阻止日历留在视图中。

这行得通吗？就我而言，当我选择一个日期时，日历会关闭然后打开，所以看起来很奇怪。

【参考方案2】：

在 Datepicker 中使用关闭事件并使其强制打开。 工作示例： https://stackblitz.com/edit/angular-ysspzm-ge2r2y