BsDatepicker doesn't show up in Children Components (ngx-bootstrap)

bootstrap datepicker
ngx-bootstrap datepicker
ngx-bootstrap datepicker keyboard navigation
bootstrap datepicker default date
ngx bootstrap datepicker open
bootstrap datepicker events
bootstrap timepicker
ngx-bootstrap datepicker custom class

I'm working with Angular 5 and I want to use ngx-bootstrap bsDatepicker module. I followed steps from https://ngx-universal.herokuapp.com/datepicker but datepicker doesn't show up. I just get console warning message. I don't get any error message

warn-once.js:10

BsDatepickerModule is under development,

BREAKING CHANGES are possible,

PLEASE, read changelog

Datepicker element also not rendered

my app.module.ts

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
...
imports: [
   ... ,
   BsDatepickerModule.forRoot(),
   ... ,
],

my custom.component.html

  <div class="col-md-6">
     <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker formControlName="date" />
  </div>

I also added CDN link of bsDatepicker css file to my index.html

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

Versions of ngx-bootstrap, Angular, and Bootstrap:

  • ngx-bootstrap: ^2.0.2
  • Angular: 5.2.7
  • Bootstrap: 3.3.7

Build system:

  • Angular CLI: 1.7.2
  • webpack: 3.11.0
  • typescript: 2.4.2

I find a solution.

Bug or Problem is : I added BsDatepickerModule.forRoot() to my app.module.ts but It works on app.compontent.html. I can't use it in my Children Components which loaded with lazyLoading, BsDatepickerModule.forRoot() doesn't work globally for all components. I don't know what`s wrong.

Temporary solution :

I add BsDatepickerModule.forRoot() to my children components which I want to use datepicker in it. This solves my problem for now.

valor-software/ngx-bootstrap, `import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; Done everything according to docs but it doesn't pop up and they are no  if you provide something thats not a valid date to the [bsValue] input the datepicker doesnt show, however there are no errors or warnings to let you know about your mistake..

There are two solutions to the problem. You should make this decision depending on your app's architecture. If you only have a smaller app with a few Child components, then just add BsDatepickerModule.forRoot() to the imports of the child component. If you have a larger app, or one that will grow over time, then the best solution is to add the BsDatepickerModule.forRoot() to your imports and BsDatepickerModule in your exports of your Shared Module. If you don't have a Shared Module (which you should), then check this and this out.

Large App Solution(Best)

import { BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
imports: [
    .....
    BsDatepickerModule.forRoot(),
    .....
  ],
exports: [
    .....
    BsDatepickerModule,
    .....
   ]
})

Small App Solution(Good but not best)

import { BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
imports: [
    .....
    BsDatepickerModule.forRoot(),
    .....
  ]

Bootstrap - datepicker doesn't work - Help Requests, Hi all, i need the datepicker of boostrap(http://bootstrap-datepicker.readthedocs.​io/en/latest/) How can i take the value of the date? rufatZZ changed the title BsDatepicker doesn't show up (ngx-bootstrap) BsDatepicker doesn't show up in Children Components (ngx-bootstrap) Mar 3, 2018 IlyaSurmay closed this Mar 13, 2018 Mathachew mentioned this issue Sep 13, 2018

Add style URL in .angular-cli.json file
"styles": ["../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"],
Import module in app.module.ts
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
imports: [
    .....
    CarouselModule.forRoot(),
    .....
  ]
})
Add Date control in .html file
<div  class="form-group">
            <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker formControlName="date" />
          </div>

it is working for me

Events, Datepicker triggers a number of events in certain circumstances. All events have extra data attached to the event object that is passed to any event handlers. How to Fix Onchange Date after manually insert date date gets changed to different date. for example. 10-May-1989 works for date format DD-MMM-YYYY main.js:2203 Wed May 10 1989 00:00:00 GMT+0530 (India Standard Time) 14:11:40.317 main.js:2203 10-May-1989 10/5/1989 but when manually change format it doesn' works.

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

I added the CDN link to the style sheet in index.htm. It is working fine.

bootstrap-datepicker, Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style. _images/demo_head.png. This is a fork of Stefan Petre's original code;  Hi there, I&#39;m trying to listen for the (change) event while using bsDatepicker, but it never fires. And (bsValueChange) is fired before the ngModel gets updated! Should I discard ngModel entire

Finding a Date Picker Input Solution for Bootstrap, Finding a Date Picker Input Solution for Bootstrap This previous step doesn't solve the problem of Bootstrap integration. You can see how all  When I select date datepicker is still on my screen, when I click anywhere on page it disappears. I tried to use 'changeDate', but when I click today button datepicker disappears with no date selection

DateTime Picker · Bootstrap, This project is a fork of bootstrap-datetimepicker project which doesn't include Time part. Some others parts has been improved as for example the load process​  Most options can be provided via data-attributes. An option can be converted to a data-attribute by taking its name, replacing each uppercase letter with its lowercase equivalent preceded by a dash, and prepending “data-date-” to the result.

Bootstrap Date Picker, Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This documentation may contain  This project is a fork of bootstrap-datetimepicker project which doesn't include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. I've copy/pasted the forked project's documentation and added my specifications.

Comments
  • datepicker appends to the end of the body, perhaps you have some z-index conflicts?
  • @IlyaSurmay No, I don't have any style problem. If this element rendered, why I can't inspect it ? :(
  • have you looked at the bottom of body after clicking on that input? if datepicker isn't there, then please create a reproduction of this issue via plunkr/stackblitz/github repo
  • Yes, I did. I just want to share problem with stackoverflow, I thought maybe I have a mistake. Thanks for reply, man. I'll add issue about this. :)
  • same problem for me. i use bootstrap 4
  • i took your solution from here -- github.com/valor-software/ngx-bootstrap/issues/3883 -- You were more precise there. you need to add the import and the - imports: [BsDatepickerModule.forRoot(),...] in the same module that declare the component
  • @yehonatanyehezkel yeah this solution is mine )) You can see on github )) i also opened issue on github after wrote here and added solution before owner want to close the issue.
  • @rufatZZ When you add BsDatepickerModule.forRoot() to your child components, how exactly are you doing that? I need the workaround because I have the same problem. I've posted a new issue with a working example demonstrating it, so hopefully they will identify the problem and fix it: github.com/valor-software/ngx-bootstrap/issues/4608
  • @Mathachew i add BsDatepickerModule.forRoot() to my child.module.ts file, if i wanted to use this modal in my child component, i really have no other idea for solve that problem :( Its really sad, I also posted issue but they closed and didn't answer :(
  • @rufatZZ I was able to finally get it working in shared.module.ts by having BsDatepickerModule.forRoot() in the imports array and BsDatepickerModule in the exports array. I only had it listed in the imports previously.
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
  • @סטנליגרונן: It seems they were struggling to get the markup to display in the answer. I’ve updated the formatting to expose their suggestion. I can’t validate if this is a correct answer to the original problem, but it’s at least not as nonsensical as it initially appeared.
  • @JeremyCaney: yes sir, it seems you're right :) Regards!