在Angular 2的日期选择器中禁用日期数组

Question

我有两种形式的日历。 一个是开始日期，另一个是结束日期。 我正在使用'ng-pick-datetime'（ https://www.npmjs.com/package/ng-pick-datetime ）具有跨浏览器日历选择器。

我的目标是阻止从日期0（1970年1月1日）到开始日期日历中选择的日期 （在结束日期日历选择器中）。

因此，这里要确保结束日期在开始日期之后。

为此，ng-pick-datetime'选择器具有[disabledDates]属性，该属性正在等待不应选择的日期数组。

我正在尝试将此属性绑定到我的禁止日期数组，该数组是在创建表单时以及每次结束日期日历获得焦点时在函数中创建的。

我正在打印禁止日期数组，以检查其是否正确创建以及其中包含的日期是否在日期0和所选的开始日期之间。 我看起来这部分工作正常。

我没有任何浏览器控制台错误。 只要让结束日期日历选择器不阻止任何日期即可。

这是我的模板代码：

<div class="input-control col-sm-6" [class.has-error]="startDate.invalid && startDate.dirty">
        <label class="control-label" for="startDate">Starting Date *</label>
        <owl-date-time
          [(ngModel)]="data.startDate"
          [dateFormat]="'DD-MM-YYYY'"
          [inputId]="'startDate'"
          [placeHolder]="'dd-mm-aaaa'"
          [type]="'calendar'"
          [dataType]="'date'"
          [autoClose]="'true'"
          id="startDate"
          name="startDate"
          #startDate="ngModel"
          [disabled]="!paramsService.isSolicitante()"
          [hideClearButton]
          required>
        </owl-date-time >
</div>

<div class="input-control col-sm-6" [class.has-error]="endDate.invalid && endDate.dirty">
        <label class="control-label" for="endDate">Ending Date *</label>
        <owl-date-time
          [(ngModel)]="data.endDate"
          [dateFormat]="'DD-MM-YYYY'"
          [inputId]="'endDate'"
          [placeHolder]="'dd-mm-aaaa'"
          [type]="'calendar'"
          [dataType]="'date'"
          [autoClose]="'true'"
          id="endDate"
          name="endDate"
          #endDate="ngModel"
          [disabled]="!paramsService.isSolicitante()"
          [hideClearButton]="!paramsService.isSolicitante()"
          [disabledDates]="'forbiddenDates'"
          (onFocus)="getForbiddenEndDates()"
          required>
        </owl-date-time >
</div>

//printing of selected date values:
<div class="col-sm-6">{{ data.startDate}}</div>
<div class="col-sm-6">{{ data.endDate}}</div>

{{ this.forbiddenDates }} //printing of the dates array to check it

这是组件代码（打字稿），只是这里重要的部分：

forbiddenDates: Date[] = [];

ngAfterViewInit(): void { this.getForbiddenEndDates(); }


// This creates an array of Dates from the beginning of all times to the value of startDate
getForbiddenEndDates(): void {
let dateZero: Date = new Date(0);
let forbiddenDates: Date[] = [];
while (dateZero <= this.data.startDate){
  forbiddenDates.push(new Date(dateZero));
  dateZero.setDate(dateZero.getDate() + 1);
}
this.forbiddenDates = forbiddenDates;
}

表单的屏幕截图和禁止日期数组

Answer 1

我回答自己。 似乎[disabledDates]模板属性不会动态更改，因此仅用于固定的日期数组。

解决方案要简单得多。 将此模板属性添加到endDate输入字段：

[min]="data.startDate"