【问题标题】:How to keep mat-datepicker calender open, even after selecting a date from calendar?即使从日历中选择日期,如何保持 mat-datepicker 日历打开?
【发布时间】:2018-07-13 08:37:32
【问题描述】:

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

【问题讨论】:

  • 如果你能提供一个可能有帮助的 stackblitz 示例
  • 你可以查看这个。stackblitz.com/edit/…
  • 您找到解决问题的方法了吗?

标签: css angular sass angular-material2 angular5


【解决方案1】:

这应该适合你:

将此添加到您的input

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

这个给你的mat-datepicker

(closed)="_openCalendar(picker)"

这是你的打字稿:

@ViewChild('keepOpen') _input: ElementRef;

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

别忘了导入ViewChildElementRef

这是我在 Stackblitz 上的工作示例

【讨论】:

  • 感谢您的回复。它保持日历打开 :) 但是当我滚动页面时,日历在特定的 DIV 中没有固定,它正在上下移动。我们可以修复它特别是 div 像输入框和其他东西是固定的吗?
  • 再次...如果你能提供一个关于 stackblitz 的示例,可能会让任何人更容易提供帮助
  • 我认为您正在寻找 display: fix 而不是 block(在 css 中)。这将阻止日历留在视图中。
  • 这行得通吗?就我而言,当我选择一个日期时,日历会关闭然后打开,所以看起来很奇怪。
【解决方案2】:

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

【讨论】:

    猜你喜欢
    • 2019-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多