使用 ngClass 更新 p-calendar 输入

Question

我不希望用户 select 未来的日期，但如果他/她这样做，我想在 p 日历的输入字段周围显示一个红色边框。

我的 css 代码：

    .invalid-date ::ng-deep>p-calendar>.ui-calendar>.ui-inputtext {
     border-color: #a94442;
}

HTML 代码：

    <div [ngClass]="{'invalid-date': dateValid()}">
                <p-calendar [(ngModel)]="date"
                            [hideOnDateTimeSelect]="true"
                            showIcon="true"
                            appendTo="body"
                            dateFormat="d-M-yy"
                            selectOtherMonths="true"
                            showTime="true"
                            hourFormat="24"
                            ></p-calendar>
     </div>

Typescript 代码：

date: Date = moment().toDate();

dateValid(): boolean {
return moment(this.date).isAfter(moment());

}

Answer 1

如果您遇到同样的问题，请确保您没有任何覆盖您的全局样式。 这就是问题所在，要解决这个问题，您可以在您想要从全局样式中排除的线中添加所谓的锤子。

     .invalid-date ::ng-deep>p-calendar>.ui-calendar>.ui-inputtext {
      border-color: #a94442 !important;
     }

Answer 2

我可以给出以下建议来解决这个问题： 1. 首先你应该检查 class 是否正常工作。 2. 比调用方法检查日期有效：

html：

<div [ngClass]="{'invalid-date': isValid}">
            <p-calendar [(ngModel)]="date"
                        [hideOnDateTimeSelect]="true"
                        showIcon="true"
                        appendTo="body"
                        dateFormat="d-M-yy"
                        selectOtherMonths="true"
                        showTime="true"
                        hourFormat="24"
                        ></p-calendar>
 </div>

ts：

isValid: boolean;

ngOnChanges(changes: SimpleChanges) {
  if (changes.date.currentValue != changes.date.previousValue) {
    this.checkValidDate();
  }
}

checkValidDate() {
  this.isValid = moment(this.date).isAfter(moment());
}