Question

I am trying to use the jQuery UI datetimepicker found here. I put the jquery-ui-timepicker-addon.js file in vender/assets/javascripts, and I put jquery-ui-timepicker-addon.css in vendor/assets/stylesheets. My application.js file looks like this:

//= require modernizr-2.0.6.min
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui-timepicker-addon.js

And my application.css looks like this:

/*
 *= require application_top
 *= require jquery-ui-timepicker-addon.css
 *= require application_bottom
*/

The javascript seems to be working, but instead of looking as it does in the example, there are no styles applied, and the hour/minute sliders to not show up. I stuck this in at the bottom of my view with the datetime picker:

<script type="text/javascript">
  $(function() { $('#start_time').datetimepicker(); });
</script>

What am I doing wrong?

Answer 1

Remove .css from application.css

/*  
*= require application_top  
*= require jquery-ui-timepicker-addon
*= require application_bottom 
*/

OR

load the styles in application.html.erb

<%= stylesheets ‘application’, ‘jquery-ui-timepicker-addon’ >