Question

Using Rails 3.2 (jQuery already installed as a gem)

The actual datepicker part works but I don’t see the sliders for the timepicker part. It doesn’t even appear in the HTML – <div class="ui-timepicker-div"> doesn’t show up anywhere!

In my head:

<%= javascript_include_tag "jquery-ui.min.js" %>
<%= javascript_include_tag "jquery-ui-timepicker-addon.js" %>
<%= stylesheet_link_tag    "jquery-ui.css" %>

In my view:

$("#event_start_time,#event_end_time").each(function(index){
    $(this).datetimepicker({
    duration: 'fast',
    dateFormat: 'yy-m-dd',
    timeFormat: 'hh:mm tt',
    defaultTimezone: '-0500',
    stepMinute: 5,
    ampm: true
    });
});

timepicker-addon.css

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

In the rendered HTML there is no class name on the inputs except for what timepicker adds to it. I have the latest jquery-ui.js file and timepicker-addon.js file. I’ve also tried this with adding jquery-ui-sliderAccess.js to the head as well.

Answer 1

The version of datetimepicker you are using is evidently not supported by jQuery 1.9. Instead of always targeting the latest version of jQuery, you should use the jquery-ui-rails gem that includes an earlier, static version of jQuery that will be able to support the datetimepicker plugin.