0

我的应用程序中有猫头鹰日期时间选择器，如下所示

<div class="input-group timepicker form-group">
                <input [owlDateTime]="arrivalDate" [owlDateTimeTrigger]="arrivalDate" [min]="date" name="ArrivalDate" class="custom-no-validation form-control"
                [(ngModel)]="myModel.arrivalDate" required #ArrivalDate="ngModel" >
              <owl-date-time #arrivalDate></owl-date-time>
              <span class="calander-icon">
                <i class="glyphicon glyphicon-calendar"></i>
              </span>
              <div *ngIf="myFrom.submitted && ArrivalDate.invalid" class="ErrorTxt">
                  <div *ngIf="ArrivalDate.errors.required && myModel.firstLastArrivalDate">Arrival date is required</div>
                </div>
            </div>

并在 ts 文件中

if (!form.valid) {
  let elements = document.getElementsByClassName("ng-invalid");
  if (elements.length > 1) {
    (elements[1] as HTMLElement).style.border ='1px solid red';
    (elements[1] as HTMLElement).focus();
  }
  return;
}

添加 [min]="date" 是为了防止用户选择过去的日期，这里的 date 是 ts 文件中的一个变量，用新的 Date() 值初始化。

现在在检索数据之后，如果 myModel.firstLastArrivalDate 中的值是一个过去的日期，而不是 [min] 导致 ng-invalid 添加到输入元素中，

min 只是为了防止用户选择过去的日期，它不应该检查元素值并与当前日期进行比较，即：new Date()

如何防止 min 在输入元素上添加 ng-invalid。

4

1 回答 1

1

我想您不能按照文档执行此操作，这是一个最小有效日期。

你可以转身可能这可以工作。

如果 ：

  1. myModel.firstLastArrivalDate 是 [min] 的过去日期 -

  2. 然后设置min = myModel.firstLastArrivalDate; - 它现在将显示任何错误并通过标志进行跟踪。

  3. 当您打开选择器时：在该事件中将最小日期更新为新日期。-- 现在会有限制

  4. 如果用户选择一个新的 val 然后保持关闭，则将先前的值分配为最小日期。

--- 基本上我试图传达的是，在日期的开放事件中，使用 min 属性值。

于 2020-06-27T07:20:45.313 回答