title: Angular 6 and bootstrap 4: date picker
body: <p>I have a form which contain a date picker / calender, email, city name and hotel name, I want a user to select a date and enter other fields and submit the data.</p>
  
  <p>This is what I have.</p>
  
  <p>HTML: </p>
  
  <pre><code> &lt;form [formGroup]="angForm" class="form-element"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="dateOfBirth"&gt;Date of Birth&lt;/label&gt;
            &lt;input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth" type="text" bsDatepicker class="form-control" /&gt;
          &lt;/div&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;
  </code></pre>
  
  <p>This dispalys the following result: <strong>wrong one</strong></p>
  
  <p><a href="https://i.stack.imgur.com/195BQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/195BQ.png" alt="enter image description here"></a></p>
  
  <p>Instead of that input with date picker  , I just want the full calender to be display on the left side ,</p>
  
  <p>Here is what I want . <strong>Good one</strong></p>
  
  <p><a href="https://i.stack.imgur.com/mKDdB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mKDdB.png" alt="enter image description here"></a></p>
  
  <p>I tried many solution online I could not be able to solve my problem, </p>
  
  <p>What do I need to change in my code to get the result I want?  please  Am newbie though, thanks</p>