angular2 bootstrap datepicker

Question

Ich versuche herauszufinden, wie Sie die angular2 bootstrap date picker ausblenden, wenn ich aus dem Eingabefeld verwischen. Es gibt kein Ereignis als (Unschärfe) für Winkel und Typoskript. Ich habe versucht mit d2.toggle(), aber es funktioniert nicht.

<input class="form-control" placeholder="yyyy-mm-dd" 
     name="dp" placement="bottom-right" [(ngModel)]="model2" ngbDatepicker 
     #d2="ngbDatepicker" (click)="d2.open()" > 

Here is a plunker

Answer 1

Schreiben Sie eine Direktive, die auf die Klicks außerhalb des Datepickers hört. Der Hauptpunkt besteht darin, zu überprüfen, wann immer das DOM-Element, das den Klick erhält, derjenige ist, auf dem die Direktive steht.

Richtlinie:

@Directive({ 
    selector: '[clickOutside]' 
}) 
export class ClickOutsideDirective { 
    constructor(private elementRef: ElementRef) { 
    } 

    @Output() 
    clickOutside = new EventEmitter<Event>(); 

    @HostListener('document:click', ['$event', '$event.target']) 
    onClick(event: MouseEvent, targetElement: HTMLElement): void { 
     if (!targetElement) { 
      return; 
     } 

     const clickedInside = this.elementRef.nativeElement.contains(targetElement); 
     if (!clickedInside) { 
      this.clickOutside.emit(event); 
     } 
    } 
} 

Und es hinzufügen wie folgt:

HTML:

<input (clickOutside)="d2.toggle()" class="form-control" placeholder="yyyy-mm-dd" 
     name="dp" placement="bottom-right" [(ngModel)]="model2" ngbDatepicker 
     #d2="ngbDatepicker" (click)="d2.toggle()" > 

DEMO

Answer 2

Sie können einfach Blur Methode in Winkel nennen wie dieses

<input class="form-control" placeholder="yyyy-mm-dd" 
      name="dp" placement="bottom-right" [(ngModel)]="model2" ngbDatepicker 
      #d2="ngbDatepicker" (blur)="onBlurMethod()" (click)="d2.toggle()" > 

und dann tun, was Sie in dieser Methode machen wollen.

Answer 3

Um es mit zwei machen arbeiten Datepickers, können Sie beide umbrechen und die Anweisung auf den Wrapper setzen. Dann steuern Öffnungen/Schließungen mit einer Flagge:

HTML:

<div (clickOutside) = "open === 1 ? d.toggle() : open ===2 ? d2.toggle() : null; open =0"> 

    <input type="text" class="form-control" id="email" name="email" 

    placeholder="From:" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" 
    (click)="open === 2 ? d2.toggle() : null; d.toggle();open = 1" required><br /> 


    <input type="text" class="form-control" id="toDate" name="toDate" 
    placeholder="To:" [(ngModel)]="toDate" ngbDatepicker #d2="ngbDatepicker" 
    (click)="open === 1 ? d.toggle() : null; d2.toggle();open = 2" required> 
</div> 
</form> 

DEMO