小编Wor*_*ver的帖子

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

目前我正在使用:

  • 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>
Run Code Online (Sandbox Code Playgroud)

Plunker:ng-bootstrap团队演示

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

谢谢您的帮助!

更新:

可能的方法:

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

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();
Run Code Online (Sandbox Code Playgroud)

css bootstrap-4 ng-bootstrap angular

6
推荐指数
1
解决办法
5689
查看次数

标签 统计

angular ×1

bootstrap-4 ×1

css ×1

ng-bootstrap ×1