title: Angular 6: How to Intergarte calender/date picker with form?
body: <p>I have two divs one contain a date picker /calender which allow user to select a date they want, second contain the form with email, citym and hotel,</p>
  
  <p>so a user select a date and fill the form and submit it by clicking book.</p>
  
  <p>Here is what I have </p>
  
  <pre><code>&lt;div class="container about-booking-input"&gt;
    &lt;div class="row about-title"&gt;
      &lt;div class="col-md-7 about-title_bookingtitle"&gt;
        &lt;h2&gt;Booking&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row about-booking"&gt;
      &lt;div class="col-sm-4 offset-sm-2 about-booking_calendar"&gt;
          &lt;app-calendar&gt;&lt;/app-calendar&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 about-booking_form"&gt;
        &lt;flash-messages&gt;&lt;/flash-messages&gt;
        &lt;form [formGroup]="angForm" class="form-element"&gt;
          &lt;div class="form-group form-element_email"&gt;
            &lt;input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)"&gt;
          &lt;/div&gt;
          &lt;div *ngIf="angForm.controls['email'].invalid &amp;&amp; (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
            class="alert alert-danger"&gt;
            &lt;div *ngIf="angForm.controls['email'].errors.required"&gt;
              Email is required.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3 form-element_city"&gt;
            &lt;select class="custom-select" id="inputGroupSelect01" #cityName&gt;
              &lt;option selected *ngFor="let city of cities" [ngValue]="city.name"&gt;{{city.name}}&lt;/option&gt;
  
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3 form-element_hotel"&gt;
            &lt;select class="custom-select" id="inputGroupSelect01" #hotelName&gt;
              &lt;option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name"&gt;{{hotel.name}}&lt;/option&gt;
  
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
              [disabled]="!validEmail"&gt;Book&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Visul the looks liek this.
  <a href="https://i.stack.imgur.com/pkIqA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pkIqA.png" alt="enter image description here"></a></p>
  
  <p>Right now I can submit just form without a date, after googling and googling found nothing helpful, </p>
  
  <p>Note: I am using this datepicker ui : ignite -ui angular <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html" rel="nofollow noreferrer">https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html</a></p>
  
  <blockquote>
    <p>Question</p>
  </blockquote>
  
  <p>How do I intergrate my calender with  form and be able to  submit it?</p>