angular 2 ng-bootstrap datepicker popup
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
Chuck
Updated on September 23, 2020Comments
-
Chuck over 3 years
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?
-
Chuck over 7 yearsThank you for your response. I tried it again and this time it works! It must be the late night and some odd thing going on at the time. Thank you!!!!
-
Mohan Ram about 7 yearsHow for this will be feasible for reactive forms?