Angular 4中的引导弹出日历

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
}