How to open and hide ng-bootstrap datepicker on custom actions?

Question

Currently I am using:

• ng-bootstrap 1.0.0-alpha.24
• angular/core 4.0.0
• bootstrap 4.0.0-alpha.6

I wanted to ask if someone knows how to autoclose the datepicker when the focus is lost or another datepicker is opened.

Also i wanted to now if it is possible to close the datepicker in the component code with typescript.

It would be nice if someone could provide a working plunker or a code snippet.

My actual implementation:

<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 team demo

I have searched a long time and I am also pretty new to angular and these things.

Thank you for your help!

Update:

Possible solution:

There were a lot of good solutions provided. I also found out by myself that I could use the class NgbInputDatepicker to close the datePicker (I always used NgbDatepicker, so it didn't work).

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Answer 1

you can open and close your datepicker from your html itself

for eg:

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

and also there are many functions which you can use in your html. some are close(), isOpen(), manualDateChange(), open(), toggle(), validate() etc. You can refer it in this plunkr http://plnkr.co/edit/G1b6fFrtVZwEz4lsou8n?p=preview