Ngx-bootstrap: BsDatepicker not showing

[arjayfuentes]

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",

[juliancuni]

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

[IlyaSurmay]

It would be nice to see a plunkr or stackblitz example with reproduction of this issue.
You can use one of starter templates:
Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview
StackBlitz: https://stackblitz.com/edit/angular-xsjgdb

[spraggler]

Same issue as above. Done everything according to docs but it doesn't pop up and they are no errors in the console.

See StackBlitz below:
angular-xsjgdb.zip

https://angular-xsjgdb.stackblitz.io

[IlyaSurmay]

@spraggler your stackblitz is just copied from our template without any changes.

[valorkin]

Hey, I am grooming issues, when reproducible sample with issue will be provided, issue will be reopened

[nukec]

same issue here... can't see anything and all included as op mentioned.

[valorkin]

We need something reproducible, to track down issue and add it to socs

[valorkin]

Docs*

[nukec]

@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

[valorkin]

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

[alexander-pokolenko]

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.

[emrekunt]

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

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

[basilinjoe]

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

can't find the css file, instead i found the scss file and am using sass. what to do ?

[juliancuni]

@basilinjoe

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

can't find the css file, instead i found the scss file and am using sass. what to do ?

That's exactly what I have wrote. Try to import the BsDatepicker style on the style.scss
Browse node_modules/ngx-bootstrap/datepicker, check if bs-datepicker.css exist, then edit style.scss and put this row
@import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';

PS: my comment witch you referring is 2 years old. I guess things have changed since that time. Anyway give it a try.

[basilinjoe]

@basilinjoe

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

can't find the css file, instead i found the scss file and am using sass. what to do ?

That's exactly what I have wrote. Try to import the BsDatepicker style on the style.scss
Browse node_modules/ngx-bootstrap/datepicker, check if bs-datepicker.css exist, then edit style.scss and put this row
@import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';

PS: my comment witch you referring is 2 years old. I guess things have changed since that time. Anyway give it a try.

Sorry

[Shyamasish]

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

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

This resolved my issue..thanks a lot

[bojidaryovchev]

it also wont open if you pass something that is NOT a valid date to the [bsValue] input - no errors shown - it just doesnt open.. hopefully that helps, it was my problem

[bojidaryovchev]

another thing I just found out is that THE ONLY WAY to set the [bsValue] is to set is as a component variable, if it is a get property or something thats not initialized with the component variables it simply doesnt show.. this is a MAJOR issue, is it gonna be fixed any time soon?

[nehamattani]

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

[EfratVanso]

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

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

it worked for me. tnx

[cattlleya]

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.

Thanks, it solved my issue.