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

【问题标题】：Disable an array of dates in a datepicker on Angular 2在 Angular 2 上的日期选择器中禁用日期数组
【发布时间】：2018-05-06 04:44:53
【问题描述】：

我在一个表单中有两个日历。一个是开始日期，另一个是结束日期。我正在使用 '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;
}

Screenshot of the form and the forbidden dates array printed

【问题讨论】：

标签： arrays angular date datepicker calendar

【解决方案1】：

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

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

[min]="data.startDate"

【讨论】：