angular2 bootstrap 日期选择器

Question

我想弄清楚如何在模糊输入字段时隐藏 angular2 bootstrap 日期选择器。 angular 和 typescript 没有事件 as (blur)。我尝试使用 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

您可以像这样简单地调用 angular 中的 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 2

编写一个指令来监听日期选择器外部的点击。要点是检查接收点击的 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 3

要使其与两个日期选择器一起使用，您可以包装两者并在包装器上设置指令。然后用flag控制openings/closings：

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

angular2 bootstrap datepicker

twitter-bootstrap

ng-bootstrap

angular