title: Angular 4+ - How to fetch date from input datepicker
body: <p>I'm new to angular.</p>
  
  <p>I have an input date picker. I want to get/fetch the date selected in the date picker.</p>
  
  <p>Code: Html file:</p>
  
  <pre><code> &lt;input class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text"&gt;
  </code></pre>
  
  <p>I'm trying to console.log the selected date.<br>
  In the component.ts file I've added a variable <code>staff_date_booking : Date;</code>
  and created a function</p>
  
  <pre><code>bookStaffEmployeeDate(){
          console.log("This is the DATE:", this.staff_book_date);
      }
  </code></pre>
  
  <p>and in the html I've added </p>
  
  <pre><code> &lt;input [ngModel]="staff_book_date | date:'yyyy-MM-dd'" class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text"&gt;
  </code></pre>
  
  <p>Once the date is selected I'm calling this function on (click) but I'm getting this.staff_book_date as undefined. </p>
  
  <p><strong>How can I store the selected date in a variable like staff_book_date</strong></p>