javascript - Angular Material datepicker 手动打开

Question

在 datepicker 文档中有一个弹出式日历的示例，它通过使用 open() 和 close() 方法以编程方式控制，如下所示:

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

也可以像这样将 opened 属性设置为 true/false:

<button mat-raised-button (click)="picker.opened = true">Open</button>

我想知道是否有任何方法可以使用它来使日历弹出窗口永久保持打开状态，以便让用户点击不同的日期，并将这些选择反射(reflect)在输入中？

Answer 1

我想你可以试试这个:

<mat-form-field class="example-full-width">
  <input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

在您的组件 ts/js 文件中，您需要声明一个新方法:

export class YourComponent{
   @ViewChild('picker') picker;
   //....
   reOpenCalendar(){
     let self = this;
        setTimeout(
            ()=>{                
                self.picker.open();
            },
            50
        );
   }
}

这将在日期选择器消失并快速重新出现时引入闪光效果。

另一种解决方案是在您的本地项目中 fork Angular Material datepicker 组件，并引入一个 Input 属性以在选择日期时禁用关闭