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>

我想知道是否还有使用它来让日历弹出窗口保持永久打开状态，以便让用户在不同日期点击，并在输入中反映这些选择？

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

Answer 2

材质库的内置datepicker控件带有一个内部Calendar组件。您可以使用以下选项使日历始终打开（不带输入框，但仍可以选择日期/月份/年份）

在此处详细了解日历：

https://onthecode.co.uk/angular-material-calendar-component/

Angular Material datepicker手动打开

2 个答案: