Closed jmuheim closed 12 years ago
Hi Joshua,
This is how the HTML of this datepicker looks like:
<div class="datepicker dropdown-menu" style="display: none; top: 50px; left: 40px; z-index: 10; "><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">August 2012</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th><th class="dow">Su</th></tr></thead><tbody><tr><td class="day old">30</td><td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td><td class="day">5</td></tr><tr><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td><td class="day">12</td></tr><tr><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td><td class="day">18</td><td class="day">19</td></tr><tr><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day active">25</td><td class="day">26</td></tr><tr><td class="day">27</td><td class="day">28</td><td class="day">29</td><td class="day">30</td><td class="day">31</td><td class="day new">1</td><td class="day new">2</td></tr><tr><td class="day new">3</td><td class="day new">4</td><td class="day new">5</td><td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td></tr></tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month">Feb</span><span class="month">Mar</span><span class="month">Apr</span><span class="month">May</span><span class="month">Jun</span><span class="month">Jul</span><span class="month active">Aug</span><span class="month">Sep</span><span class="month">Oct</span><span class="month">Nov</span><span class="month">Dec</span></td></tr></tbody></table></div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible; "><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2010-2019</th><th class="next" style="visibility: visible; "><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div>
Your looks like jQuery UI's one. My guess is that you are using jQuery UI and that is loaded after you load this datepicker.
I'm using jquery-rails gem and rails3-jquery-autocomplete gem. Here's the relevant part of my Gemfile:
gem 'simple_form'
gem 'slim'
gem 'jquery-rails'
gem 'rails3-jquery-autocomplete' # jQuery autocomplete
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
gem 'twitter-bootstrap-rails'
gem 'kickstrap_rails'
gem 'bootstrap-datepicker-rails'
gem 'bootstrap-timepicker-rails'
end
I'm not really sure how I could make sure that this datepicker is loaded after jQuery UI.
Show me the manifest files for the assets pipeline.
app/assets/javascripts/application.js
You were right, jQuery was loaded after in there! I corrected it and now it works, thank you! :) Have a nice weekend.
Excellent. Have a nice week-end too
More infos here:
http://stackoverflow.com/questions/12121571/bootstrap-datepicker-rails-javascript-assets-properly-loaded-but-css-not
Update:
It seems the problem isn't that the CSS is not loaded, but that the datepicker's generated HTML does not have some needed classes, like ".datepicker".
Here's the generated code: