gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 18:07:16 27 4
gpt4 key购买 nike

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

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

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

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

这是 link我正在使用。

最佳答案

要在焦点上显示日期选择器,您可以通过使用 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>

关于angular - 如何在angular2中使用bootstrap datepicker输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40624496/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com