有一种方法可以知道因为单击了日期,所以关闭了mat-datepicker弹出窗口

问题描述 投票:0回答:1

我想在关闭mat-datepicker弹出窗口时执行一些操作,但仅当用户单击一个日期时(如果通过转义键或背景幕单击关闭了弹出窗口,则不应触发该操作。

我知道有一个@Output('closed') closedStream: EventEmitter<void>,但是每次关闭弹出窗口时都会触发。我的想法是检测打开和关闭的事件之间是否存在dateChange事件,但是如果用户单击已选择的日期,则该操作无效。

我尝试使用自定义DateAdapter来解决此问题(重写sameDatecompareDate方法以返回所选日期总是不同于当前所选日期),但似乎mat-month-view组件未使用DateAdapter在发出之前比较日期选择更改:

_dateSelected(date: number) {
    if (this._selectedDate != date) {
      const selectedYear = this._dateAdapter.getYear(this.activeDate);
      const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
      const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);

      this.selectedChange.emit(selectedDate);
    }

    this._userSelection.emit();
}

不确定这本身是否是错误...

有人知道一种简单的方法来确定是否由于日期选择而关闭了重要的日期选择器弹出窗口?我缺少明显的东西吗?

谢谢!

angular angular-material angular-material2 mat-datepicker
1个回答
0
投票

如果您想知道是否使用[ngModel] +(ngModelChange)或formControl进行某些更改,我认为是一种方法,>

  <input matInput [ngModel]="date" (ngModelChange)="change($event)"
        [matDatepicker]="picker" placeholder="Choose a date">
  //in .ts
  date:any;
  change(date:any)
  {
    this.date=date;
    console.log("change")
  }

  <input matInput [formControl]="formControl" [matDatepicker]="picker2" 
           placeholder="Choose a date">
   //in .ts
  formControl:FormControl=new FormControl()
  ngOnInit()
  {
    this.formControl.valueChanges.subscribe(res=>{
      console.log("change formControl")
    })
  }

参见simple stackblitz

© www.soinside.com 2019 - 2024. All rights reserved.