rails: using the jquery-ui-timepicker-addon.js

Question

I am trying to use the http://trentrichardson.com/examples/timepicker/ plugin.

In my gemfile, I have (and I made sure the gem is installed):

gem 'jquery-rails'

I downloaded jquery-ui-timepicker-addon.js into the app/assets/javascripts directory

I added the CSS section to app/assets/stylesheets/application.css.erb

I added the following to app/assets/javascript/application.js:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui-timepicker-addon

$(
  function() {
    $('.date_with_hours_and_minutes').datetimepicker(
      {dateFormat: 'yy-mm-dd hh:mm'}   )
  }
);

In my view, I have:

<%= f.text_field :start_date_time, id: "date_with_hours_and_minutes" %>

I am not getting any errors, but I am not seeing the datetime picker either. Any ideas?

are the two periods in $('.date_with_hours_and_minutes')..datetimepicker a typo in your question or in your code? — cjhveal
– cjhveal, Commented Aug 24, 2012 at 16:36
Typo in in the question. I was fixing it while you were writing your comment :-) — EastsideDev
– EastsideDev, Commented Aug 24, 2012 at 16:45

stephenmurdoch · Accepted Answer · 2012-08-24 17:24:57Z

2

try

$('#date_with_hours_and_minutes').datetimepicker(

you need to attack the id

Update

In addition to the above, I notice you are trying to use dateFormat to handle time, and I wonder if it's necessary to timeFormat instead:

$('#date_with_hours_and_minutes').datetimepicker({
  dateFormat: 'yy.mm.dd',
  timeFormat: 'hh:mm'
});

edited Aug 24, 2012 at 17:24

answered Aug 24, 2012 at 16:47

stephenmurdoch

34.7k30 gold badges120 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EastsideDev Over a year ago

Some progress. I am seeing the calendar now, but I am not seeing the time picker.

EastsideDev Over a year ago

I'm still not seeing anything other than the date picker

Pritesh Jain · Accepted Answer · 2012-08-24 17:30:45Z

1

either use one of below

change attach event to id: date_with_hours_and_minutes instead of class as you have defined id on the field

 $('.date_with_hours_and_minutes').datetimepicker({
      dateFormat: 'yy-mm-dd'
  })

to

$('#date_with_hours_and_minutes').datetimepicker({
  dateFormat: 'yy-mm-dd'
})

or if you have many datetimepickers on the view

attach class to them

<%= f.text_field :start_date_time, class: "date_with_hours_and_minutes" %>


$('.date_with_hours_and_minutes').datetimepicker({
      dateFormat: 'yy-mm-dd '
});

edited Aug 24, 2012 at 17:30

answered Aug 24, 2012 at 17:15

Pritesh Jain

9,1444 gold badges40 silver badges51 bronze badges

3 Comments

EastsideDev Over a year ago

I fixed the class vs id thing, but I am still only seeing the date picker. No sign of the time picker.

Pritesh Jain Over a year ago

@EastsideDeveloper, did it get fixed?

EastsideDev Over a year ago

Adding the # and keeping the id fixes it, but I am still seeing only the date picker (calendar widget), but not the time picker.

Collectives™ on Stack Overflow

rails: using the jquery-ui-timepicker-addon.js

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related