angular2引導日期選擇器

我想弄清楚如何在輸入字段模糊輸出時隱藏angular2引導日期選擇器。對於角色和打字稿沒有事件（模糊）。我試過使用d2.toggle（）但它不起作用。angular2引導日期選擇器

<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

來源

2017-09-11 gerl

編寫一個指令，它將聽取日期選擇器外部的點擊。主要觀點是檢查接收到點擊的DOM元素是否具有指令。

指令：

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

，並將其添加像這樣：

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

來源

2017-09-11 19:26:36 Vega

肯定..的plunkr工作，但現在我有2個日期選擇器。它是同時顯示日期選擇器..它在http://plnkr.co/edit/gjyNnAG9wqucbyyFgl85?p=preview – gerl

我會看看！ – Vega

您可以直接調用角度Blur方法這樣

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

，然後做你想做的那個方法做。

來源

2017-09-11 19:26:30

，使其與兩項工作datepickers，你可以包裝兩者並在包裝器上設置指令。然後控制開口/關門用標誌：

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

來源

2017-09-13 16:09:00 Vega

angular2引導日期選擇器

回答

相關問題