Angular Material datepicker manual open

Question

In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:

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

One can also set the opened property to true/false like so:

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

I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?

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属性以在选择日期时禁用关闭