To make two ng2-datetimepickers and obtain its val

Question

I am using https://github.com/CuppaLabs/angular2-datetimepicker. However, in my form, I want two date time pickers. One for -> From: and the other for -> To: purpose. How to obtain/capture their values. Because I am unable to figure out how to differentiate and write codes for two DateTime pickers. Can you please help. I also want the datetimepicker popups to be aligned well with the input boxes in the view(html). They are dis-aligned.

here is the image :

component.html

  <form [formGroup]="dateTransactionForm">
   <div class=" form-inline">
    <table id="searchTableStyle">
    <tr>

    <div class="form-group">

   <strong style=" font-size: 14px ;color: #333;">From: 
  </strong>
    <angular2-date-picker class="form-control" 
   [formControl]="dateTransactionForm.controls['fromDateTransaction']" 
     [(ngModel)]="toTransaction"  [settings]="settings"></angular2- 
       date-picker>

      </div>


    <div class="form-group ">
     <strong style=" font-size: 14px ;color: #333;">To: </strong>

       <angular2-date-picker class="form-control" 
   [formControl]="dateTransactionForm.controls['fromDateTransaction']" 
   [(ngModel)]="fromTransaction"  [settings]="settings"></angular2- 
  date-picker>

     </div>

     <td>
     <div class="form-group" style="text-align: center;display: 
  block;justify-content: center;">
   <p>
    <button type="submit" style="margin-right:84px;height: 
    35px;width:65px;margin-top: 14px" class="input-group-addon" 
    [disabled]="!(dateTransactionForm.valid)"
                  id="faIcon" 
   (click)="searchByDate(fromTransaction,toTransaction)">
                   &nbsp;&nbsp;&nbsp;
                  <i style="text-align: center; display: 
    block;justify-content: center;" class="fa fa-search "></i>
                </button>
              </p>
            </div>
          </td>
        </tr>
        <tr>

   :://more code
  </table>
    </div>
    </form>
   </div>
  </div>

component.ts

  export class TransactionComponent implements OnInit {



  settings = {
  bigBanner: true,
   timePicker: true,
  // format: 'dd-MM-yyyy',
  defaultOpen: false
    }

  constructor() {

   DatePicker.prototype.ngOnInit = function() {
    this.settings = Object.assign(this.defaultSettings, 
   this.settings);
    if (this.settings.defaultOpen) {
    this.popover = true;

    }
    this.date = new Date();
    console.log("DateTimepicker date is =" +this.date)
    };

component.css

 #addbtn{
float:right;
}

 thead>tr>th:hover {
cursor: pointer;
background-color: #384c57;
color: rgb(240, 202, 132);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 
0.24);
}

th{
width:1px;white-space:nowrap;
}



 .glyphicon-th{
  vertical-align: middle;
  }

table{
font-family: Arial, Helvetica, sans-serif;
table-layout: fixed;
display: block;
overflow: scroll;
}


thead{
background-color: #33444d;
color: white;  
}


.card{
border: none !important;
}


#faIcon{
background: #2f4855;
color: white;
border: none;
}

input:hover {
background-color: rgb(247, 185, 114)  
}

input:focus{
border : 2px solid rgb(247, 185, 114) !important;
}


.panel {
border: none;
margin-bottom: 0
 }

.panel-transparent {
background: none;
}

 #searchTableStyle{
 overflow:visible;
 background-color:transparent;
 border:transparent;

 position: relative
 }

.table{
color:rgb(255, 255, 255); background-color:rgba(17, 26, 24, 0.452);
}
.panel-transparent .panel-heading{
background: rgba(44, 51, 59, 0.575)!important;
text-align: center;
color: #fff;

}
.my-pagination /deep/ .ngx-pagination .current {
 background: #33444d;
}