I cannot get the @ng-bootstrap/ng-bootstrap datepicker to actually show a calendar. I first tried within my own project, using the plunkr example from the documentation for multiple calendars. All I got was a small rectangle, about 4 pixels tall and 30 pixels wide, with nothing inside.
I then searched SO and found this example and plunkr and tried it, with the same result.
I generated a totally new Angular app with the Angular 2 CLI, installed the @ng-bootstrap/ng-bootstrap, and added the code from the last plunkr. This gives even worse results, not even showing the selector button.
Does anyone have insight into this?
update: I realized I didn't have font-awesome referenced, so after that my controls look like this and the calender does pop down, but this is not a good look!
Update 2: Still trying to solve this. I tried a different library with similar results-- the dropdown does not work. I believe this is a problem with the dropdowns just not working in nested components. I've compared all the libraries for the working version with the non-working and they are all the same. The only difference is that the working one is in a top-level component and the non-working one is in a nested component.
Update 3: Solved.
2 things were involved. 1 - I had to combine the form-group and input-group classes into one div
2 - there was a TypeScript error in the console for an undefined variable. I don't know why that would prevent the control from dropping down the calendar, since that variable had nothing to do with the form, but it did. Once I fixed that, the calendar renders correctly.
Here's my sample code that works:
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";
@Component({
selector: 'app-sub',
templateUrl: './sub.component.html',
styleUrls: ['./sub.component.css']
})
export class SubComponent implements OnInit {
thisForm: FormGroup;
constructor() { }
ngOnInit() {
this.thisForm = new FormGroup({
dp1: new FormControl('')
});
}
onSubmit(){}
}<form [formGroup]="thisForm" (ngSubmit)="onSubmit()">
<div class="form-group input-group">
<input class="form-control" placeholder="yyyy-mm-dd" id="dp1" form-control-name="dp1" name="dp1" ngbDatepicker #d1="ngbDatepicker" required>
<div class="input-group-addon" (click)="d1.toggle()" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!thisForm.valid">Submit</button>
</form>
I was experiencing a similar kind of problem where my ng-bootstrap calendar pop-up was not working. what solved my problem was also mentioned in comments by John_J.
Actually, The ng-bootstrap repository contains a set of native Angular directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
Angular (requires Angular version 4 or higher, tested with 4.0.3) Bootstrap CSS (tested with 4.0.0-beta)
The solution is simple.
In your index.html:-
Add -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">into your<head>.Then add-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>just above your ending tag. And there you go...calendar starts working completely fine.Here's a link to the site you could get more details from.