角2 ng引导日期戳弹出 [英] angular 2 ng-bootstrap datepicker popup
问题描述
但是，如果我添加了多个datepicker输入标签，只有一个正在工作。以下是我创建的代码。我尝试将#d更改为＃d1和＃d2（也可以更改toggle（）部分），页面会出现错误。
< div class =input-group>
< input class =form-controlplaceholder =yyyy-mm-ddname =dp[（ngModel）] =newItem.EndTimengbDatepicker＃d =ngbDatepicker
< div class =input-group-addon（click）=d.toggle（）>
< i class =fa fa-calendararia-hidden =true>< / i>
< / div>
< / div>
< div class =input-group>
< input class =form-controlplaceholder =yyyy-mm-ddname =dp[（ngModel）] =newItem.StartTimengbDatepicker＃d =需要ngbDatepicker>
< div class =input-group-addon（click）=d.toggle（）>
< i class =fa fa-calendararia-hidden =true>< / i>
< / div>
< / div>
我也试图用一个组件包装它，它允许我有不同的属性的多个datepicker实例。然而，它似乎没有将值传回给父组件。
new.campaign.html
< div class = row col-md-12 col-lg-12>
< div class =col-md-4 col-lg-4>
< label for =campaignStartTime>开始时间< / label>
< datepicker-popup [（model）] =newItem.StartTime（modelChange）=updateDate（$ event）[required] =trueid =campaignStartTime>< / datepicker-弹出式>
< / div>
< / div>
datepicker-popup.component.ts
<$来自'@ angular / core'的p $ p>
import {Component，Input，Output，EventEmitter};
@Component（{
selector：'datepicker-popup'，
templateUrl：'app / campaign / datepicker-popup.html'
}）
export class DatepickerPopupComponent {
@Input（）
model：any;
@Input（）
id：string;
@Input（）
必需：boolean = false;
@Output（）
modelChange：EventEmitter< any> = new EventEmitter（）;
构造函数（）{}
updateModel（）{
let date = this.model;
date = '12 / 22/2016'
this.modelChange.emit（date）;
}
}
datepicker-popup.html
< div class =input-group>
< input class =form-controlplaceholder =yyyy-mm-ddname =dp [（ngModel）] =model（change）=updateModel（）ngbDatepicker＃d = ngbDatepicker需要>
< div class =input-group-addon（click）=d.toggle（）>
< i class =fa fa-calendararia- hidden =true>< / i>
< / div>
< / div>
有人可以指出正确的方向来解决问题吗？
我试图将#d更改为＃d1和＃d2（同时调用toggle（）部分），页面会出现错误。
由于这是正确的方法，因此您的应用程序必须有特定的东西。一个工作的代码片段：
< div class =input-group>
< input class =form-controlplaceholder =yyyy-mm-ddname =dp1[（ngModel）] =newItem .EndTimengbDatepicker＃d1 =ngbDatepicker必需>
< div class =input-group-addon（click）=d1.toggle（）>
< i class =fa fa-calendararia-hidden =true>< / i>
< / div>
< / div>
< div class =input-group>
< input class =form-control占位符=yyyy-mm-ddname =dp2[（ngModel）] =newItem.StartTimengbDatepicker＃d2 =ngbDatepicker
< div class =input-group-addon（click）=d2.toggle（）>
< i class =fa fa-calendararia-hidden =true>< / i>
< / div>
< / div>
在plunker中的实例： https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview
验证你我们获得了唯一的输入名称，并且使用指向一个指令实例的唯一变量名（＃d1 ，＃d2 等等。）。如果您仍然遇到问题，请重新填写我已链接的广告位，并在 https：// github.com/ng-bootstrap/ng-bootstrap
Hi I am investigating on ng-bootstrap datepicker. I looked at the demo code and was able to get it to work in my application.
However, if I added more than 1 datepicker input tags, only one is working. Below are the code I created. I tried to change the #d to #d1 and #d2 (also change the toggle() part) and the page spits out errors.
<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>
I also tried to wrap it with a component and it allowed me to have multiple datepicker instance for different properties. However, it didn't seem to pass the value back to the parent component.
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.component.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>
Can someone point me to the right direction to solve the issue?
I tried to change the #d to #d1 and #d2 (also chancge the toggle() part) and the page spits out errors.
There must be something specific to your application going on since this is the right approach. A working code snippet:
<div class="input-group">
<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()" >
<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" required>
<div class="input-group-addon" (click)="d2.toggle()" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</div>
And the live example in plunker: https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview
Verify that you've got unique input names and that you use unique variable names pointing to a directive instance (#d1, #d2 etc.). If you still face problems reproduce it in the plunker I've linked and open an issue in https://github.com/ng-bootstrap/ng-bootstrap
这篇关于角2 ng引导日期戳弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
