Bootstrap Datepicker gem没有在Rails中格式化

Question

I know this type of question has come up before on SO, and I have tried every solution I could find, but nothing seems to work. The javascript is working fine, but for some reason, I can't get the datepicker window to go in the right spot or format correctly. After testing multiple gems, I keep getting this:

There are no errors in my console. Here is what my related gems look like in my Gemfile :

gem 'jquery-rails', "~> 2.3.0"
gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'

And here is my application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-datepicker
//= require_self

And my application.css has:

*= require bootstrap-datepicker

As for the actual html file, it looks like this ( application#index.html )

<input type="text" data-behaviour='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('[data-behaviour~=datepicker]').datepicker();
  })
</script>

Any and all ideas are welcome.

UPDATE:

It seems like my bootstrap css files aren't loading at all. Do I need to use css.scss files? I can't seem to find a straightforward answer online. Manually inserting the css into my application.css file results in this:

Answer 1

Just for a sanity check give the standard jquery datepicker a shot. I generally use it with bootstrap.

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require_tree .

app/assets/stylesheets/application.css

 *= require jquery.ui.datepicker
 *= require jquery.timepicker.css
 *= require_self
 *= require_tree .

app/assets/javascripts/your_model.js.coffee

jQuery ->
  $("#div_id_here").datepicker dateFormat: "yy-mm-dd"

Answer 2

Since you're using bootstrap-sass, you can (and should) use @import statements instead of *= require statements for your css.scss files. This allows you to define and use variables, etc amongst all of your css.scss files, which allows for full customization of Bootstrap and its components. I'm not sure if there could be something else wrong with your configuration... but I'd suggest starting here anyway since none of your css is showing up. So your application.css.scss file would look like:

# @import any file that may contain variables you'd like to use in any libraries
# added below this point (e.g. `defines.css.css`)
@import "bootstrap_and_overrides";
@import "bootstrap-datepicker";
# @import "whatever other .css.scss files you have...";

Then in bootstrap.css.scss you'd individually import each of the desired bootstrap CSS components after "overriding" any variables. Here is what you need to start from:

• variables (this is the basis your variable/style "overrides", placed at the tope of your bootstrap_and_overrides.css.scss file.)
• bootstrap components (this is the core of your bootstrap_and_overrides.css.scss file.)