Question

您好我正在调查ng-bootstrap datepicker。我查看了演示代码，并能够在我的应用程序中使用它。

但是，如果我添加了多个datepicker输入标记，则只有一个正在运行。以下是我创建的代码。我试图将#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>

我还尝试用组件包装它，它允许我为不同的属性设置多个datepicker实例。但是，它似乎没有将值传递回父组件。

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>

有人能指出我正确的方向来解决问题吗？

Answer 1

我尝试将#d更改为＃d1和＃d2（也是切换toggle（）部分）并且页面吐出错误。

必须有一些特定于您的应用程序的东西，因为这是正确的方法。一个有效的代码片段：

 <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等）。如果你仍然遇到问题，我会在https://github.com/ng-bootstrap/ng-bootstrap

中链接并打开问题。

angular 2 ng-bootstrap datepicker popup

1 个答案: