Question

using this
https://github.com/jonthornton/jquery-timepicker

demo here:
http://jonthornton.github.com/jquery-timepicker/

on a rails 3.2 app

trying to use the datepair example
and cant seem to figure out why the time fields don’t work
the calendar for the first field pops up, but nothing else.

view code:

  %p.datepair{'data-language' => "javascript"}
    = f.text_field :starttime, :class => 'date start'  
    %span.ui-timepicker-container
      = f.text_field :starttime, :class => 'time start ui-timepicker-input', :autocomplete => "off", :value => "12:15am"  
      %ul.ui-timepicker-list{ :tabindex => "-1", :style => "position: absolute; left: 567.667px; z-index: 2; top: 2246.87px; display: none;" }
        %li 12:00am
        %li 12:15am
        ...
        %li 12:30am
        %li 1:00am
    %span.ui.timepicker-container
      = f.text_field :starttime, :class => 'time start ui-timepicker-input', :autocomplete => "off"  
      %ul.ui-timepicker-list.ui-timepicker-with-duration{ :tabindex => "-1", :style => "position: absolute; left: 674.5px; z-index: 2; top: 2422.87px; display: none;"}
      = f.text_field :starttime, :class => 'date start hasDatePicker'  

in the firebug console I get:

$this.timepicker is not a function

$this.timepicker(opts);

Answer 1

I guess your Rails installation did not load jquery.timepicker.js

datepair.js uses jquery.timepicker.js and the datepicker from jQuery UI (use //= require jquery-ui inside your application.js for that).

This is what I have in my Rails app:

vendor/assets/javascripts/jquery-timepicker/datepair.js
vendor/assets/javascripts/jquery-timepicker/jquery.timepicker.js
vendor/assets/stylesheets/jquery-timepicker/jquery.timepicker.css

then inside one of your .js file:

//= require jquery-ui-addresspicker/jquery.ui.addresspicker.js
//= require jquery-timepicker/jquery.timepicker.js
//= require jquery-timepicker/datepair.js

and inside one of your .css file:

 *= require jquery-timepicker/jquery.timepicker.css

I have created a gem that packages this jQuery plugin: https://github.com/tkrotoff/jquery-timepicker-rails