Bootstrap pop-up calendar in Angular 4

Question

I am using Bootstrap pop-up calendar that I can choose different date. I would like to import specific data when I click a certain date.. I already have the table where I can import data, and I just want the entries to be updated with different date chosen.

How should I approach this?

calendar

<span>
      <form class="form-inline">
          <button (click)="myEvent($event)">Test</button>
          <span style='margin-right:1.25em; display:inline-block;'>&nbsp;</span>
    <div class="form-group">
      <div class="input-group">
        <input class="form-control"
               placeholder="yyyy-mm-dd"
               name="dp"
               [(ngModel)]="model"
               ngbDatepicker
               #d="ngbDatepicker">
        <button class="input-group-addon"
                (click)="d.toggle()"
                type="button">
              <img src="img/calendar-icon.svg" style="width: 0.5rem; height: 0.5rem; cursor: pointer;"/>
            </button>
      </div>
    </div>
    </form>
    </span>

Answer 1

If I got correctly your problem is you are trying to fetch some data (trigger some action) once the date selected is certain date. Am I right?

If that's the case, all you need to do is to control the event triggered when the model of the input date changes, how can you do that? with ngModel & ngModelChange.

Sample:

input class="form-control"
               placeholder="yyyy-mm-dd"
               name="dp"
               [ngModel]="model"
               (ngModelChange)="onChange($event)"
               ngbDatepicker
               #d="ngbDatepicker">

And then in the typescript file, create a method to handle every time the model gets updated:

onChange(date) {
   this.model = date; // This is what [()] banana box does automatically
   checkIfDateIsWhatIAmExpecting(date) // call the method to check if is the date and if so, load/fetch/do whatever you need
}