title: Comparing dates in angular2
body: <p>In my Angular program, I'm trying to filter an array based on if each of the dates are between 2 set dates. I have the dates set to be the first and the last of the current month:</p>
  
  <p><code>StartDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
   EndDate = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);</code></p>
  
  <p>I have the user choose which days they would like to see the results of the array for:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-12" style="padding-left: 0px; text-align: center; padding-bottom: 10px;"&gt;
       &lt;label class="col-sm-5" style="text-align: right;"&gt;Start Date&lt;/label&gt;
       &lt;div class="col-sm-7"&gt;
           &lt;input class="form-control" type="date" id="StartDate" [ngModel]="StartDate | date: 'yyyy-MM-dd'" (ngModelChange)="StartDate=$event" name="StartDate" /&gt;
        &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-12" style="padding-left: 0px; text-align: center;"&gt;
        &lt;label class="col-sm-5" style="text-align: right;"&gt;End Date&lt;/label&gt;
        &lt;div class="col-sm-7"&gt;
              &lt;input class="form-control" type="date" id="EndDate" [ngModel]="EndDate | date: 'yyyy-MM-dd'" (ngModelChange)="EndDate=$event" name="EndDate" /&gt;
         &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and then, I call a function that filters the array based on those dates:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setValues(): void {
      this.datePTO = this.ptoData.filter(pto =&gt; pto.date &gt; this.StartDate &amp;&amp; pto.date &lt; this.EndDate);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the user keeps the dates the same and then tries to see the array, it won't have anything in it. Whereas, if they change the dates at all, the array will fill with what should be in it. I've found out that whenever the user changes the dates, they change to string and then are compared somehow. How can I fix this so that they can just hit the button if the date range they want is the default one shown?</p>