Home » Javascript » ng-bootstrap datepicker popup not showing complete Angular 4

ng-bootstrap datepicker popup not showing complete Angular 4

Posted by: admin November 1, 2017 Leave a comment

Questions:

I’ve searched and found nothing about this specific error..so, here it goes:

I’m developing an Angular 4 app, and need to place ng-bootstrap datepicker on the form, but is not showing it completely..like the image:
error

Here’s my code
html:

<form>

    ...
    <div class="form-group">

        <label for="startDate" class="control-label">Start Date</label>
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="startDate" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-addon" (click)="d.toggle()" >
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </div>
        </div>

    </div>

    <div class="form-group">

        <label for="startDate" class="control-label">End Date</label>
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="endDate" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-addon" (click)="d.toggle()" >
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </div>
        </div>

    </div>

</form>

component.ts :

import { Component,
ViewEncapsulation } 
from '@angular/core';

import { routerTransition }
from '../../router.animations';



import {NgbModal,
ModalDismissReasons} 
from '@ng-bootstrap/ng-bootstrap';





@Component({

...

})

export class
ProgramFormComponent {
...
model;
...



constructor(private
modalService: NgbModal) {

...

}



...

anyway, can’t find the error, example on the ng-bootstrap documentation works perfectly, and on Plunker too..

Answers: