如何获取上一个日期角度日期选择器

Question

我正在像这样使用 Angular Material DatePicker

<input matInput [(ngModel)]="selectedDate" [max]="today" (dateChange)="onDateSelect($event)"
              [matDatepicker]="picker" readonly />

我需要在

中设置最后选择的日期

onDateSelect()

功能。功能如下

 onDateSelect(event) {
    if(some condition){
      this.selectedDate = <//set previous date>
    }
    this.selectedDate = event.value;   
 }

如何将上一个日期传递给上述函数

Answer 1

另一种选择是使用 FormControl，并且成对使用

selectedDate=new FormControl()
ngOnInit()
{
   this.selectedDate.valueChanges.pipe(
      startWith(this.selectedDate.value), //it's necesary send a first value
      pairwise())  //the pairwise make the "magic"
 .subscribe(([old,value])=>{
    if (old!=value)
    {
       console.log("I change from "+old+" to "+value)
    }
 })

<input matInput [formControl]="selectedDate" [max]="today" 
           [matDatepicker]="picker" readonly />

see the stackblitz

Answer 2

创建一个变量 prevSelectedDate 为 null 并添加请在代码中添加以下更改。

onDateSelect(event) {

if(some condition && this.prevSelectedDate){
  this.selectedDate = this.prevSelectedDate;
}
this.selectedDate = event.value;  
this.prevSelectedDate =  this.selectedDate

}

Answer 3

您需要 2 个变量，如下所示：

如果您的验证未通过，请重置为上一个。

JS：

export class DatepickerApiExample implements OnInit {
  previousVal: any;
  curVal: any;
  checkPassed: true;

  ngOnInit() {
    this.previousVal = this.curVal;
  }

  onDateSelect($event: any) {
    if (this.checkPassed) {
      this.previousVal = this.curVal;
    } else {
      //Reset to previous
      this.curVal = this.previousVal;
    }
  }
}

HTML：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [(ngModel)]="curVal" [max]="today" (dateChange)="onDateSelect($event)" [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>