Angular 4中的Bootstrap弹出日历

Question

我正在使用Bootstrap弹出日历，可以选择其他日期。 当我单击某个日期时，我想导入特定的数据。.我已经有了可以导入数据的表，我只想使用选择的不同日期来更新条目。

我应该如何处理？

日历

<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

如果我没错，那么您的问题是，一旦选择的日期是某个日期，您就试图获取一些数据（触发某些操作）。 我对吗？

在这种情况下，您需要做的就是控制在输入日期的模型发生更改时触发的事件，该怎么办？ 使用ngModel和ngModelChange。

样品：

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

然后在打字稿文件中，创建一个方法，以在每次模型更新时进行处理：

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
}