title: Disable an array of dates in a datepicker on Angular 2
body: <p>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' (<a href="https://www.npmjs.com/package/ng-pick-datetime" rel="nofollow noreferrer">https://www.npmjs.com/package/ng-pick-datetime</a>) to have a cross-browser calendar picker.</p>
  
  <p>My goal is to block <strong>from date 0 (1st Jan 1970) to the date selected in the starting date calendar</strong>, in the ending date calendar picker.</p>
  
  <p>So the thing here is to make sure the ending date is after the starting date.</p>
  
  <p>For this, ng-pick-datetime' picker has the [disabledDates] property, which is waiting for an array of Dates that shouldn't be selectable.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I don't get any browser console error. Just have the ending date calendar picker not blocking any date.</p>
  
  <p>This is my template code:</p>
  
  <pre><code>&lt;div class="input-control col-sm-6" [class.has-error]="startDate.invalid &amp;&amp; startDate.dirty"&gt;
          &lt;label class="control-label" for="startDate"&gt;Starting Date *&lt;/label&gt;
          &lt;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&gt;
          &lt;/owl-date-time &gt;
  &lt;/div&gt;
  
  &lt;div class="input-control col-sm-6" [class.has-error]="endDate.invalid &amp;&amp; endDate.dirty"&gt;
          &lt;label class="control-label" for="endDate"&gt;Ending Date *&lt;/label&gt;
          &lt;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&gt;
          &lt;/owl-date-time &gt;
  &lt;/div&gt;
  
  //printing of selected date values:
  &lt;div class="col-sm-6"&gt;{{ data.startDate}}&lt;/div&gt;
  &lt;div class="col-sm-6"&gt;{{ data.endDate}}&lt;/div&gt;
  
  {{ this.forbiddenDates }} //printing of the dates array to check it
  </code></pre>
  
  <p>And this is the component code (typescript), just the part that matters here:</p>
  
  <pre><code>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 &lt;= this.data.startDate){
    forbiddenDates.push(new Date(dateZero));
    dateZero.setDate(dateZero.getDate() + 1);
  }
  this.forbiddenDates = forbiddenDates;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yaSpt.jpg" rel="nofollow noreferrer">Screenshot of the form and the forbidden dates array printed</a></p>