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

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

In typescript you can simply define a variable datepickerVisibility and then in your template use *ngIf to show or hide your datepicker component. Here is a demo code:

Template: <datepicker *ngIf="datepickerVisibility" [ngModel]="date"> </datepicker>

Component: private datepickerVisibility: boolean = false; // Show the datepicker showDatepicker() { this.datepickerVisibility = true; }

Edit:

Therefore you could use jQuery. Add the jQuery js into your index.html and in your typescript component use jQuery as follows:

declare let jQuery: any;

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'template.html',
    styleUrls: ['test.css'],
})
export class TestComponent {
   constructor() {}

    public toggleDatepicker() {
        jQuery("#datepicker01").toggle();
   }
 }

And in your template file just add the id datepicker01 to your datepicker div

<div id="datepicker01" ...>