如何在自定义操作上打开和隐藏ng-bootstrap datepicker？

Question

目前我正在使用:

• ng-bootstrap 1.0.0-alpha.24
• 角/核4.0.0
• bootstrap 4.0.0-alpha.6

我想询问是否有人知道如何在焦点丢失或打开另一个datepicker时自动关闭日期选择器.

此外,如果可以使用typescript关闭组件代码中的datepicker,我现在也想要.

如果有人可以提供有效的plunker或代码片段,那就太好了.

我的实际实施:

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

Plunker:ng-bootstrap团队演示

我已经搜索了很长时间,我对角度和这些东西也很新.

谢谢您的帮助!

更新:

可能的方法:

提供了很多好的解决方案.我也发现自己可以使用类NgbInputDatepicker来关闭datePicker(我总是使用NgbDatepicker,所以它不起作用).

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Answer 1

你可以从你的HTML本身打开和关闭你的日期选择器

例如:

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

<div (click)="datePickerInput.open()"></div>

<span (click)="datePickerInput.close()"></span>

并且还有许多功能可以在你的HTML中使用.有些人close(),isOpen(),manualDateChange(),open(),toggle(),validate()等,您可以参考它在这个plunkr http://plnkr.co/edit/G1b6fFrtVZwEz4lsou8n?p=preview