Pfthb

I am working on a project in which I've 2 componenets, one is order.componenet in which I've list of orders let say in list there are 3 orders. second is datepicker.component in which I've datapicker for each of the three orders, for datePicker I'm using MyDateRangePicker library.

order.component.html is somewhat like this

 <div *ngFor="let order of orders; let i = index" class="col-md-4">
 <app-date-picker
 [orderInfo] = "order"
 >
 </app-date-picker>
 </div>

datepicker.component.html is like this

<div class="order__datepicker">
 <my-date-range-picker
 name="period"
 [options]="datePicker"
 (dateRangeChanged)="onDateRangeChanged($event)"
 [(ngModel)]="model"
 >
 </my-date-range-picker>
 </div>

To select initial date range I'm doing;

@Input() orderInfo: Order;

-------

model: any = 
 beginDate: null,
 endDate: null
 ;

I want to set different initial dates range value for these three different datepickers according to the orders, for this I'm doing something like this.

setDateRange() 
 this.orders.forEach(
 (s: any) => 
 if (s.status === 'PROGRESS') 
 model.beginDate.year = 2018;
 model.beginDate.month = 11;
 model.beginDate.day = 1;

 model.endDate.year = 2018;
 model.endDate.month = 11;
 model.endDate.day = 4;
 

 if (s.status === 'SHIPPED') 
 model.beginDate.year = 2018;
 model.beginDate.month = 11;
 model.beginDate.day = 1;

 model.endDate.year = 2018;
 model.endDate.month = 11;
 model.endDate.day = 6;
 

 if (s.status === 'DELIVERED') 
 model.beginDate.year = 2018;
 model.beginDate.month = 11;
 model.beginDate.day = 1;

 model.endDate.year = 2018;
 model.endDate.month = 11;
 model.endDate.day = 9;
 

 
 );

The output which I'm getting:

The output which I'm actually expecting:

So my question is how can I achieve this do I need to assign some sort of id to datepicker, so based on that id I can set seperate date ranges maybe or there is something else I can do ?