title: How to set the value of date input field using data binding in Angular 5?
body: <p>I have two date input fields (fromDate &amp; toDate) in my angular application. I also 3 buttons 'Yesterday', 'Last Week', 'Last Month'. The user can either choose both 'from' and 'to' dates or they can press one of the buttons. </p>
  
  <p>As soon as a button is clicked, the from &amp; to date fields must be filled appropriately. I have applied the ngModel directive to both these date input fields. Here is my HTML</p>
  
  <pre><code>        &lt;div class="col-sm-4 filter-box"&gt;
              &lt;label&gt;Filter by Date&lt;/label&gt;
              &lt;div class="row content-even" &gt;
                  &lt;button class="btn btn-primary btn-sm my-1" (click)="yesterdayDateFilter()"&gt;Yesterday&lt;/button&gt;
                  &lt;button class="btn btn-primary btn-sm my-1"&gt;Last Week&lt;/button&gt;
                  &lt;button class="btn btn-primary btn-sm my-1"&gt;Last Month&lt;/button&gt;                    
              &lt;/div&gt;
              &lt;div class="row mt-1 content-even" &gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="fromDate"&gt;From &lt;/label&gt;
                      &lt;input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate"&gt;
                      {{fromDate}}
                  &lt;/div&gt;                    
                  &lt;div class="form-group"&gt;
                      &lt;label for="toDate"&gt;To &lt;/label&gt;
                      &lt;input type="date" id="toDate" [(ngModel)]="toDate" name="toDate"&gt;
                      {{toDate}}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Now when a button is pressed, I am not sure how to fill the date fields. For example, when i press the yesterday button, I want my yesterdayDateFilter() function to change the from and to dates appropritely. Here is my code for yesterdayDateFilter()</p>
  
  <pre><code>yesterdayDateFilter(){        
  let yesterday = new Date();
  yesterday.setDate(yesterday.getDate()-1);
  
  this.fromDate =  new Date(this.datePipe.transform(yesterday, 'yyyy-MM-dd'));
  console.log(this.fromDate); }
  </code></pre>
  
  <p>I am using datepipe in angular to transform the date into suitable format</p>
  
  <blockquote>
    <p>import { DatePipe } from '@angular/common';</p>
  </blockquote>
  
  <p>Now when i click the yesterday button, the from date field remains unchanged but the fromDate value ( {{fromDate}} in the template)beside the input field displays in this format</p>
  
  <blockquote>
    <p>Thu Apr 05 2018 05:30:00 GMT+0530 (IST)</p>
  </blockquote>
  
  <p>I've been trying different ways to achieve the required functionality but not have been able to figure out a way. Help? Thank you.</p>