Question

当我模糊输入字段时，我正在试图弄清楚如何隐藏angular2引导日期选择器。角度和打字稿没有事件（模糊）。我尝试过使用d2.toggle（），但它不起作用。

 <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

编写一个指令，听取日期选择器外部的点击。重点是检查接收点击的DOM元素是否具有指令的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

Answer 2

你可以像这样以角度调用Blur方法

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

然后在那个方法中做任何你想做的事。

Answer 3

要使它与两个日期选择器一起使用，您可以包装两者并在包装器上设置指令。然后用旗帜控制开/关：

<强> 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

angular2 bootstrap datepicker

3 个答案: