angular 2 ng-bootstrap datepicker popup

您好，我正在調查ng-bootstrap datepicker。我查看了演示代碼，並能夠在我的應用程序中使用它。angular 2 ng-bootstrap datepicker popup

但是，如果我添加了多個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>

有人點我到正確的方向解決這個問題？

來源

2016-09-23 Chuck

你可以使用https://github.com/valor-software/ng2-bootstrap for angular2？ –

@HarryNinh AFAIK ng2-bootstrap does not not support for datepickers in popups and a user is asking for specific for https://ng-bootstrap.github.io所以你的評論是沒有用的。 –

@ pkozlowski.opensource我在當前項目中使用了ng2-bootstrap所有日期字段，所以我知道它支持彈出日期選擇器。而且因爲他正在尋找ng-bootstrap解決方案，所以我沒有將它作爲答案發布。 –

我試圖將#d更改爲＃d1和＃d2（同時chancge 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

來源

2016-09-23 06:58:42

謝謝你的迴應。我再次嘗試，這次它的工作！一定是深夜，當時有些奇怪的事情發生。謝謝！！！！ – Chuck

這對於反應形式如何可行？ –

angular 2 ng-bootstrap datepicker popup

回答

相關問題