Winkel-2 ng-bootstrap-datepicker popup

Hallo, ich bin die Untersuchung auf ng-bootstrap-datepicker. Ich sah auf der demo-code und war in der Lage zu bekommen, es funktioniert in meiner Anwendung.

Allerdings, wenn ich fügte hinzu, mehr als 1 datepicker-input-tags, nur eine arbeitet. Unten sind der code, den ich erstellt. Ich habe versucht zu ändern #d #d1 und #d2 (auch die toggle () - Teil) und die Seite spuckt Fehler.

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

Ich habe auch versucht, wickeln Sie es mit einer Komponente und es mir erlaubt, mehrere datepicker-Instanz für verschiedene Eigenschaften. Jedoch, es schien nicht zu übergeben Sie den Wert zurück auf die übergeordnete Komponente.

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.Komponente.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>

Kann mir jemand zeigen in die richtige Richtung, um das Problem zu lösen?

InformationsquelleAutor Chuck | 2016-09-23