ngx-bootstrap: BsDatepicker not showing

I used BsDatepickerModule in my application but it is not showing. I followed all the instructions in the documentation but still no luck. I don’t know what’s wrong but I know I properly imported it in my application.

`import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
	imports: [
        BsDatepickerModule.forRoot()`

<label>Date Effective</label> <input type="text" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker" bsDatepicker>

as well applying the style in angular-cli.json file.

"styles": [ "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "styles.css" ],

I’m in angular 2.3 "dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1",

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 23 (6 by maintainers)

Most upvoted comments

Try to import the BsDatepicker style on the style.scss @import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';

+34

juliancuni on Sep 24, 2017

@valorkin in my case i put BsDatepickerModule.forRoot() in global app.module.ts, but then I forgot to import same module inside of child module as well. My mistake.

Btw whoever has issues here is a playground plunkr with proper imports and proper module names: https://plnkr.co/edit/jOqnKkIVNWD63wjSEbuK

+19

nukec on Nov 8, 2017

you need to import BrowserAnimationsModule to app.module.ts too.

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

+11

emrekunt on Jul 22, 2019

This was related to z-index in my case. If the imports are correct, check out the last nodes of the body as the datepicker will be attached there.

alex-pokolenko on Sep 5, 2018

This is not workaround, this is how angular DI works. Services (providers) have global visibility and should be imported once (forRoot), but components visibly is scoped to module

valorkin on Nov 9, 2017

Why is BrowserAnimationsModule even required? This adds unnecessary bundle size when the app isn’t even using animations.

Using ngx-bootstrap is a real pain I feel. There is no clear cut way to add individual components. We have to add the entire library. Now, the BrowserAnimationsModule is required even if the app is not using animations. Devs are far better off using something else.

ronnyknight45 on Aug 31, 2021

I was facing the same issue with angular 8. Please downgrade and restrict your ngx-bootstrap version to 3.0.0

nehamattani on Feb 18, 2020