Twitter bootstrap angular2引导数据采集器

当我模糊掉输入字段时，我试图找出如何隐藏angular2引导日期选择器。对于angular和typescript，没有作为（模糊）的事件。我试过使用d2.toggle（），但它不起作用

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

---

您可以像这样简单地调用

Blur

方法

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

---

然后用这个方法做你想做的任何事情。

写一个指令，它将监听日期选择器外部的点击。 主要的一点是，每当接收到click的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);
        }
    }
}

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

@指令({
选择器：“[单击外部]”
})
导出类ClickOutside指令{
构造函数（私有elementRef:elementRef）{
}
@输出（）
单击外部=新建EventEmitter（）；
@HostListener（'文档：单击'，['$event'，'$event.target']））
onClick（事件：MouseEvent，targetElement:HTMLElement）：void{
如果（！targetElement）{
返回；
}
const clickedInside=this.elementRef.nativeElement.contains（targetElement）；
如果（！clickedInside）{
点击outside.emit（事件）；
}
}
}

这样加上：

HTML:

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

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

---

要使它与两个日期选择器一起工作，您可以将两者都包装起来，并在包装器上设置指令。然后用标志控制打开/关闭：

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>

---

当然。。plunkr有效，但现在我有了两个日期选择器。。它同时显示两个日期选择器。。它在里面，我来看看！