How to add Bootstrap 3 datepicker to Angular 4 project

Question

I would like to add these datepickers: https://eonasdan.github.io/bootstrap-datetimepicker/Installing/ but here is not a instruction how to add it to Angular 4 project. How can I do that?

Solution 1

Install via NPM:

• bootstrap
• eonasdan-bootstrap-datetimepicker-npm

Add in 'angular-cli.json' configuration:

      "styles": [   
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"        
        "../node_modules/eonasdan-bootstrap-datetimepicker-npm/build/css/bootstrap-datetimepicker.min.css",
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/eonasdan-bootstrap-datetimepicker-npm/build/js/bootstrap-datetimepicker.min.js"
      ],

Then use it according to the documentation https://eonasdan.github.io/bootstrap-datetimepicker/.

Just pay attention that container of your calendar have to have position relative and cannot have overflow hidden, or you cannot see calendar dialog when you try to select value.

Solution 2

I found this to be useful; It's a wrapper for original eonasdan-bootstrap-datetimepicker datepicker for angular

https://github.com/atais/ng2-eonasdan-datetimepicker

Comments

[Aravind]

Use ngBootstrap date picker

[user]

Yes, but I use now bootstrap 3 and all my styles will crash if I add ngBootstrap.

[nivas]

1) are you using npm? if yes its very easy, 2) modifying system.js 3) add js, css files directly to index.html, which one you prefer?