angular - 如何在angular2中使用bootstrap datepicker输入字段

Question

我已经按照下面提到的步骤进行操作，并且已经能够实现下图。

1. 安装 6.9.1 版的 nodejs。它带有 npm 3.10.8
2. 然后我关注了以下installation steps .
3. 现在当我尝试使用 <ngb-datepicker></ngb-datepicker> 时我能够看到这种类型的屏幕。

但我无法理解如何使用 input[ngbDatepicker]

我试过了 <input ngbDatepicker />但只出现一个文本框。当我聚焦它时，它没有显示日期选择器。

这是 link我正在使用。

Answer 1

要在焦点上显示日期选择器，您可以通过使用 template reference 使用 focus 输入事件如下:

<input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()">

或者您可以根据 Datepicker in a popup example of Datepicker 添加触发器 toggle 按钮点击事件

// Component
@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model;
}

// HTML
<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-addon" (click)="d.toggle()" >
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </div>
</div>