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

Question

I am currently using:

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

I wanted to ask if anyone knows how to autocline a dumper when focus is lost or another date picker is open.

Also I would like now if you can close the datepicker in the component code using typescript.

It would be nice if someone could provide a working plunk or 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 demo

I have been looking for a long time and I am also pretty new to angular and these things.

Thank you for your help!

Update:

Possible Solution:

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

Answer 2

typescript datepickerVisibility, * ngIf, datepicker. :

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

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

Edit:

jQuery. jQuery js index.html typescript jQuery :

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();
   }
 }

id datepicker01 datepicker div

<div id="datepicker01" ...>