Question

我正在使用Ngbdatepicker创建一个小型应用程序。目前，我面临一些问题。当我选择的日期大于今天时，我希望显示一个错误。

例如，如果我的生日是5月21日，则我输入的日期不能超过当前日期。

如果它不是今天的日期，我想显示一个错误

<div class="form-group">
    <label class="form-control-label" for="field_birthDate">Birth Date</label>
    <div class="input-group">
        <input id="field_birthDate" type="text" class="form-control" name="birthDate" ngbDatepicker #birthDateDp="ngbDatepicker" [(ngModel)]="registerAccount.birthDate" [minDate]="ngbDatepickerConfig.minDate" [maxDate]="ngbDatepickerConfig.maxDate" required #birthDate="ngModel" placeholder="yyyy-mm-dd"/>
        <span class="input-group-append">
            <button type="button" class="btn btn-secondary" (click)="birthDateDp.toggle()"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
    <div *ngIf="birthDate.dirty && birthDate.invalid">
        <small class="form-text text-danger" *ngIf="birthDate.errors.ngbDate?.requiredBefore || birthDate.errors.ngbDate?.requiredAfter">
            Your age must be between 18 and 100.
        </small>
    </div>
</div>

以上示例与我想要的不匹配。日期大于当前日期时，应该显示错误。

Answer 1

定义一个函数以确定日期是否晚于今天（由于未指定，请使用TypeScript）：

isAfterToday(date) {
  let now = new Date() //today's date
  return date.getTime() > now.getTime();  //date.getTime() returns MS value of a date. So this will return which date is greater.
};

然后在模板中，可以使用此功能绑定是否显示错误消息div：

<div *ngIf="isAfterToday(birthDate)">
    <small class="form-text text-danger" 
        ERROR: date supplied is invalid since it is after today's date.
    </small>
</div>

当日期晚于今天日期时显示错误

1 个答案: