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＆amp; ngModelChange。

样品：

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

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

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
}

Angular 4中的Bootstrap弹出日历

1 个答案: