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

I've got two calendars in a form. One is a starting date, and the other is the ending date. I'm using the 'ng-pick-datetime' (https://www.npmjs.com/package/ng-pick-datetime) to have a cross-browser calendar picker.

我有一个表格中的两个日历。一个是开始日期,另一个是结束日期。我正在使用'ng-pick-datetime'(https://www.npmjs.com/package/ng-pick-datetime)来设置跨浏览器日历选择器。

My goal is to block from date 0 (1st Jan 1970) to the date selected in the starting date calendar, in the ending date calendar picker.

我的目标是从结束日期日历选择器中的日期0(1970年1月1日)到开始日期日历中选择的日期。

So the thing here is to make sure the ending date is after the starting date.

所以这里的事情是确保结束日期在开始日期之后。

For this, ng-pick-datetime' picker has the [disabledDates] property, which is waiting for an array of Dates that shouldn't be selectable.

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

What I'm trying is to bind this property to my array of forbidden dates, which is created in a function when the form is created, and also every time the ending date calendar gets focus.

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

I'm printing my array of forbidden dates to check if it is created correctly and if the dates included in it are between date 0 and the starting date selected. I looks like this part is working fine.

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

I don't get any browser console error. Just have the ending date calendar picker not blocking any date.

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

This is my template code:

这是我的模板代码:

<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

And this is the component code (typescript), just the part that matters here:

这是组件代码(typescript),只是这里重要的部分:

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

表格的屏幕截图和打印的禁止日期数组

1 个解决方案

#1

I answer myself. It seems that this [disabledDates] template property doesn't change dynamically, so it's just for a fixed array of dates.

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

The solution is much simpler. Add this template property to the endDate input field:

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

[min]="data.startDate"

#1