Angular 4中的Bootstrap弹出日历

时间:2017-11-03 15:37:06

标签: angular calendar angular-ui-bootstrap

我正在使用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>

1 个答案:

答案 0 :(得分:0)

如果我得到了正确的问题,那么一旦所选日期为特定日期,您就会尝试获取某些数据(触发某些操作)。我是对的吗?

如果是这种情况,您需要做的就是控制输入日期模型更改时触发的事件,您如何做到这一点?与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
}