angular 2 个日期选择器弹出窗口,共 bootstrap 个
angular 2 ng-bootstrap datepicker popup
您好,我正在研究 ng-bootstrap datepicker。我查看了演示代码,并能够让它在我的应用程序中运行。
但是,如果我添加了 1 个以上的日期选择器输入标签,则只有一个有效。下面是我创建的代码。我试图将#d 更改为#d1 和#d2(也更改了 toggle() 部分)并且页面吐出错误。
<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>
我还尝试用组件包装它,它允许我为不同的属性设置多个日期选择器实例。但是,它似乎没有将值传回给父组件。
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>
日期选择器-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);
}
}
日期选择器-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>
有人可以指出解决问题的正确方向吗?
I tried to change the #d to #d1 and #d2 (also chancge the toggle() part) and the page spits out errors.
一定有一些特定于您的应用程序的事情正在进行,因为这是正确的方法。工作代码片段:
<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>
plunker 中的实例:https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview
确认您拥有唯一的输入名称,并且您使用了指向指令实例的唯一变量名称(#d1
、#d2
等)。如果您仍然遇到问题,请在我链接的 plunker 中重现它并在 https://github.com/ng-bootstrap/ng-bootstrap
中打开一个问题
您好,我正在研究 ng-bootstrap datepicker。我查看了演示代码,并能够让它在我的应用程序中运行。
但是,如果我添加了 1 个以上的日期选择器输入标签,则只有一个有效。下面是我创建的代码。我试图将#d 更改为#d1 和#d2(也更改了 toggle() 部分)并且页面吐出错误。
<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>
我还尝试用组件包装它,它允许我为不同的属性设置多个日期选择器实例。但是,它似乎没有将值传回给父组件。
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>
日期选择器-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);
}
}
日期选择器-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>
有人可以指出解决问题的正确方向吗?
I tried to change the #d to #d1 and #d2 (also chancge the toggle() part) and the page spits out errors.
一定有一些特定于您的应用程序的事情正在进行,因为这是正确的方法。工作代码片段:
<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>
plunker 中的实例:https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview
确认您拥有唯一的输入名称,并且您使用了指向指令实例的唯一变量名称(#d1
、#d2
等)。如果您仍然遇到问题,请在我链接的 plunker 中重现它并在 https://github.com/ng-bootstrap/ng-bootstrap