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?
AFAIK ng2-bootstrap nicht nicht haben die Unterstützung für datepickers in popups und ein Benutzer wird gefragt, speziell für ng-bootstrap.github.io also, dein Kommentar ist nicht hilfreich.
Ich bin mit der ng2-bootstrap in meinem aktuellen Projekt für alle Felder Datum, damit ich weiß, es unterstützt popup-datepicker. Und weil er auf der Suche für ng-bootstrap-Lösung, die ich nicht poste es als Antwort.
InformationsquelleAutor Chuck | 2016-09-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Muss es etwas spezifisches an Ihre Anwendung gehen auf seit dies ist der richtige Ansatz. Ein funktionierendes code-snippet:
- Und das live-Beispiel in plunker: https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview
Stellen Sie sicher, dass Sie haben einzigartige input-Namen und die Verwendung eindeutiger Variablennamen verweisen auf eine Richtlinie Instanz (
#d1
,#d2
etc.). Wenn Sie weiterhin Probleme reproduzieren es in der plunker habe ich verlinkt und öffnen Sie ein Thema in https://github.com/ng-bootstrap/ng-bootstrapWie für dieses wird machbar sein für reaktive Formen?
InformationsquelleAutor pkozlowski.opensource