CODEWITHSUNDEEP
angulartwitter-bootstrap-3
user
user

Reputation: 4840

How to add Bootstrap 3 datepicker to Angular 4 project

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?

Upvotes: 2

Views: 12561

Answers (2)

vmachacek
vmachacek

Reputation: 575

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

Upvotes: 3

Milos
Milos

Reputation: 1868

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.

Upvotes: 2

Related Questions