Example of using `bootstrap-datepicker` with Phoenix

[marick]

I’m trying to use bootstrap-datepicker with a Phoenix app. If I add it and jquery to my brunch-config.js and web/static/js/app.js, I can get the following:

This needs styling. So I add the stylesheet in brunch-config.js:

  npm: {
    enabled: true,
    styles: {
      bootstrap: ["dist/css/bootstrap.min.css"],
      "bootstrap-datepicker": ["dist/css/bootstrap-datepicker3.min.css"],
    }
  }

Now when I view it, it looks like this:

As a front-end newbie, I’m at a loss to figure this out. Surely many people have used this (or other) datepickers in Phoenix apps. What am I doing wrong?

The commit that has the problem

[OvermindDL1]

Purely a javascript/css issue here not really Phoenix, but I did use bootstrap-datepicker in a project a little while back, however I do not have it around anymore as it has since been replaced with pure Elm stuff. First thing though, try to reduce the test-case to as simple plain html/css/js as possible and build up or diagnose from there.

[marick]

@peerreynders solved my problem: