angulaire à 2 ng-bootstrap datepicker popup

Salut, je suis d'enquêter sur ng-bootstrap datepicker. J'ai regardé le code de démonstration et a été en mesure de le faire fonctionner dans mon application.

Cependant, si j'ai ajouté plus de 1 datepicker les balises input, un seul fonctionne. Sont ci-dessous le code que j'ai créé. J'ai essayé de changer le #d #d1 et #d2 (également modifier le toggle() de la partie) et la page crache des erreurs.

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d.toggle()" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

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

J'ai aussi essayé de l'envelopper avec un composant et il m'a permis d'avoir plusieurs datepicker exemple pour des propriétés différentes. Cependant, il ne semble pas de passer de la valeur pour le composant parent.

new.campaign.html

<div class="row col-md-12 col-lg-12">
    <div class="col-md-4 col-lg-4">
        <label for="campaignStartTime">Start Time</label>
        <datepicker-popup [(model)]="newItem.StartTime" (modelChange)="updateDate($event)" [required]="true" id="campaignStartTime"></datepicker-popup>
    </div>
</div>

datepicker-popup.composante.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';
    @Component({
selector: 'datepicker-popup',
templateUrl: 'app/campaign/datepicker-popup.html'
    })
    export class DatepickerPopupComponent {
    @Input()
    model:any;
    @Input()
    id:string;
    @Input()
    required:boolean=false;
    @Output()
    modelChange: EventEmitter<any> = new EventEmitter();

    constructor(){    }
    updateModel(){
    let date = this.model;
    date = '12/22/2016'
    this.modelChange.emit(date);
    }
    }

datepicker-popup.html

<div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp [(ngModel)]="model"  (change)="updateModel()" ngbDatepicker #d="ngbDatepicker" required>
    <div class="input-group-addon" (click)="d.toggle()" >
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

Quelqu'un peut-il m'indiquer la bonne direction pour résoudre le problème?

OriginalL'auteur Chuck | 2016-09-23