複数の日付ピッカーを1つの形式で表示するAngular2 with difference component

Question

差異コンポーネントを含む1つのフォームで複数のdatepickerを作成するという問題があります。私は最初の日付ピッカーを閉じたいいけない別の入力バーをクリックした場合nativeElement.containsは別の入力バーが同じ要素である検出ので が、これは一例であるコード
https://embed.plnkr.co/nRCpS4/

問題は、私は思いますされています。

誰かが私の問題を解決するのを助けてくれますか？

Answer 1

このような場合の私のお気に入りのソリューションは、自分のニーズを満たすためにライブラリによって提供されるコンポーネントを拡張する独自のコンポーネントを作成することです。それで、2つのコンポーネントを一度に処理することに問題はありません。また、それは私の上のコンポーネントでコードが重複することを避けるのに役立ちます。ここに私のplnkrです：https://plnkr.co/edit/zyxJOiliVbi4lym7lAy9

@Component({ 
    selector: 'my-date-picker', 
    template: `<div class="input-group"> 
       <input class="form-control" placeholder="yyyy-mm-dd" [name]="name" [(ngModel)]="model" (ngModelChange)="onModelChange()" ngbDatepicker #dp="ngbDatepicker" required> 
       <div class="input-group-addon" (click)="dp.toggle();"> 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
       </div> 
      </div>`, 
    providers: [ 
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyDatePickerComponent), multi: true }] 
}) 
export class MyDatePickerComponent implements ControlValueAccessor { 
    @Input() name: string = ''; 
    @Input() model: any; 
    @ViewChild('dp') dp; 
    private propagateChange:any =() => {}; 

    constructor(private _eref: ElementRef) { } 

    @HostListener('document:click', ['$event']) 
    onClick(event) { 
    if (this._eref.nativeElement.contains(event.target)) return true; 
    setTimeout(() => this.dp.close(), 10); 
    } 

    onModelChange() { 
    this.propagateChange(this.model); 
    } 

    writeValue(value) { 
     this.model = value; 
    } 

    registerOnChange(fn) { 
    this.propagateChange = fn; 
    } 

    registerOnTouched() {} 
} 

コードがあなたに不慣れなようであれば、読んでください：

： https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

をコードのこの部分を使用することにより、私は同じように私の日付ピッカーを使用させていただいております

<my-date-picker name="dp1" [(ngModel)]="newItem.EndTime"></my-date-picker> 
<my-date-picker name="dp2" [(ngModel)]="newItem.StartTime"></my-date-picker> 

ただし、あなたもそれは同じようにすべてのコードを残して、あなたのクロージング条件ビットを向上させることができます

if (!this._eref.nativeElement.contains(event.target) || !this.dynamicId._elRef.nativeElement.parentNode.contains(event.target)) { 
     setTimeout(() => this.dynamicId.close(), 10); 
} 

Answer 2

私はテンプレートを更新して（クリック）ハンドラ

(click)="d1.toggle(); openDatepicker(d1); closeDatepicker(d2)"にcloseDatePicker（DX）機能を追加しましたので、あなたはD1を開くためにクリックすると、あなたを明示的に近いd2及びその逆。

template: ` 
    <div class="input-group" style="margin-top:50px"> 
     <input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime" ngbDatepicker #d1="ngbDatepicker" required> 
     <div class="input-group-addon" (click)="d1.toggle(); openDatepicker(d1); closeDatepicker(d2)" > 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
     </div> 
    </div> 

    <div class="input-group"> 
     <input class="form-control" placeholder="yyyy-mm-dd" name="dp2" [(ngModel)]="newItem.StartTime" ngbDatepicker #d2="ngbDatepicker" #d3 required> 
     <div class="input-group-addon" (click)="d2.toggle(); openDatepicker(d2); closeDatepicker(d1)" > 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
     </div> 
    </div> 
    ` 

次に、その機能をコントローラに追加するだけです。

closeDatepicker(id){ 
    id.close(); 
    } 

これはトリックを行う必要があります！

Answer 3

<div class="input-group" style="margin-top:50px"> 
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime" ngbDatepicker #d1="ngbDatepicker" required> 
    <div class="input-group-addon" (click)="d1.toggle(); d2.toggle(); openDatepicker(d1)" > 
     <i class="fa fa-calendar" aria-hidden="true"></i> 
    </div> 
</div> 

<div class="input-group"> 
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp2" [(ngModel)]="newItem.StartTime" ngbDatepicker #d2="ngbDatepicker" #d3 required> 
    <div class="input-group-addon" (click)="d2.toggle(); d1.toggle(); openDatepicker(d2)" > 
     <i class="fa fa-calendar" aria-hidden="true"></i> 
    </div> 
</div> 

次のボタンをクリックすると、他の日付ピッカーを切り替えるようにしてください。