jQuery countdown for Ruby on Rails datetime input

Question

I am trying to enable a "due date" kind of thing where users pre-select the datetime something is due (it can be anything but in my case its the due date for a paper one needs to submit to his/her teacher).

steps Im adding a column to an existing table pins

$ rails g migration add_due_date_to_pins duedate:datetime

migration

class AddDueDateToPins < ActiveRecord::Migration
  def change
    add_column :pins, :duedate, :datetime
  end
end

In /app/views/pins/_form.html.erb I created a form for that input

<div class="form-group">
        <%= f.label :duedate %>
        <%= f.datetime_select :duedate %>
</div>

then in /app/views/pins/show.html.erb

<%= @pin.duedate %>

Right now the time is displayed like such : 2014-08-12 03:01:00 UTC.

Now, I want to use the jquery-countdown-rails gem for the asset pipeline to enable a countdown from the date selected. Something like "3 days 7 hours and 53 minute left".

I don't know how to extract that date time selected and make it into something that jQuery can manipulate. Help is much appreciated!

Answer 1

First, you need a div to attach timer to, so add one to your /app/views/pins/show.html.erb file. Second, add some basic javascript to create a Date and start the timer:

<div id="due_date_timer"></div>

:javascript
  var year = <%= @pin.duedate.year %>;
  var month = <%= @pin.duedate.month %>;
  var day = <%= @pin.duedate.day %>;

  var date = new Date(year, month, day);
  $("#due_date_timer").countdown({until: date});