Ndtyjky

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 ?