比较在角度材料中使用 datepicker 选择的 2 个日期答案

【问题标题】：Compare 2 dates which are selected using datepicker in angular material比较在角度材料中使用 datepicker 选择的 2 个日期
【发布时间】：2022-01-04 23:24:36
【问题描述】：

我有 2 个日期选择器在一个表单中。如果tillDate 小于fromDate，我希望发生错误。这就是我想要做的，但没有成功。如何比较两个日期？谢谢

这是html

                       <div class="row">
                        <div class="col-md-6">
                            <mat-form-field class="full-width" appearance="standard">
                                <mat-label>From Date</mat-label>
                                <input matInput formControlName="fromDate" required (change)="onTillDate()"
                                    [matDatepicker]="picker" placeholder="mm/dd/yyyy" > 
                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                <mat-datepicker #picker></mat-datepicker>
                                <mat-error *ngIf="hasError('fromDate')" class="error-block">
                                   From Date is a required field
                                </mat-error>
                            </mat-form-field>
                        </div>

                        <div class="col-md-6">
                            <mat-form-field class="full-width" appearance="standard">
                                <mat-label>Till Date</mat-label>
                                <input matInput formControlName="tillDate" required 
                                    [matDatepicker]="pickerTillDate" placeholder="mm/dd/yyyy" (change)="onTillDate()" >
                                <mat-datepicker-toggle matSuffix [for]="pickerTillDate"></mat-datepicker-toggle>
                                <mat-datepicker #pickerTillDate></mat-datepicker>
                              <mat-error *ngIf="tillDate.hasError('mismatch')" class="error-block" > Till Date should be equal to greater than From Date
                            </mat-error>
                            </mat-form-field>
                        </div>
                    </div>

这是ts文件

  onTillDate(){
      const startDate =  (moment(this.fromDate.value)).toDate();
      const endDate =(moment(this.tillDate.value)).toDate();
    if(endDate < startDate ){
      this.tillDate.setErrors({mismatch:true});
    }
    else
    {
      this.tillDate.setErrors(null);
    }
  }

【问题讨论】：

你考虑过图书馆momentjs.com吗？它真的很容易使用。
不知道，试试看，谢谢

标签： angular angular-material angular11

【解决方案1】：

Angular 有内置的 formatDate 方法，所以你可以用它来格式化你的日期，也可以像下面的代码一样简单地比较它：

在您的 component.ts 文件中：

   date1 = formatDate(inputDate1,'yyyy-MM-dd','en_US');
   date2  = formatDate(inputDate2,'yyyy-MM-dd','en_US');

   if(date1>date2){
     console.log('---date1 is greater----');
    }else{
     console.log('---date2 is greater-----');
    }

【讨论】：

我把它放在点击事件中吗？，因为我确实尝试过，但它没有调用点击事件
首先，不需要格式化你的日期。只需像 inputDate1 > inputDate2 一样直接比较它们。其次，您可以在保存或进一步处理数据之前调用 form.validate()。此外，最简洁的方法是为您的表单数据制作自定义验证器，例如：stackblitz.com/edit/…

【解决方案2】：

我能够调用更改事件。我的错误不是使用 dateChange 而是使用 change ，它没有调用事件。所以正确的功能是： {

}

【讨论】：