CODEWITHSUNDEEP
javascriptjqueryjquery-ui
sysconfig
sysconfig

Reputation: 431

jquery date/time picker issue (timepicker not a function)

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);

Upvotes: 0

Views: 2821

Answers (1)

tanguy_k
tanguy_k

Reputation: 12283

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

Upvotes: 1

Related Questions