Bootstrap Angular 4 中的弹出式日历

Question

我正在使用 Bootstrap 可以选择不同日期的弹出式日历。我想在单击特定日期时导入特定数据。我已经有 table 可以导入数据的地方，我只想使用所选的不同日期更新条目。

我应该如何处理这个问题？

日历

<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
}

Bootstrap Angular 4 中的弹出式日历

Bootstrap pop-up calendar in Angular 4

calendar

angular-ui-bootstrap

angular