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

Question

我遵循了下面提到的步骤,我已经能够达到以下图像.

1. 安装版本6.9.1的nodejs.它附带npm 3.10.8
2. 然后我按照以下安装步骤操作.
3. 现在,当我尝试使用时,<ngb-datepicker></ngb-datepicker>我能够看到这种类型的屏幕.

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

我试过<input ngbDatepicker />但只出现一个文本框.当我关注它时,它没有显示日期选择器.

这是我正在使用的链接.

Answer 1

要在焦点上显示日期选择器,您可以使用模板引用focus来使用输入事件,如下所示:

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

或者,您可以添加触发toggle按按钮点击日期选择器的事件Datepicker in a popup例如日期选择器

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