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引导日期选择器

回答

相关问题