Justin Britten

Inline jQuery datePicker and Rails

This post describes how to use the jQuery datePicker plugin (found here) to display an inline calendar and post the selected date back to your Rails app. I’m simply going to put a hidden text_field on the page and use a bit of javascript to populate the field with the selected date.

Grab the datePicker plugin from http://plugins.jquery.com/project/datepicker, and include it in your Rails app.

Get an inline datePicker set up by following the author’s instructions at http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/inlineDatePicker.html. Quite simply, you only need to do two things.

One: Add this to your .html.erb page:

<div id="date-picker"></div>

Two: To the same .html.erb page, add this bit of jQuery to turn the the div into an inline datePicker:

<script type="text/javascript">
$('#date-picker').datePicker({inline:true});
</script>

At this point you should see the datePicker on your page. It should look something like:

Now, let’s put a text_field in your form to keep the date. Here’s what I’ve got:

<% form_for(@event) do |f| %>
<fieldset>
<label for="occurred_on">Date event occurred:</label>
<%= f.text_field 'occurred_on' %>

<%= f.submit "Save" %>
</fieldset>
<% end %>

We need to catch the user’s selected date and populate our text_field. To do this, we need to modify the bit of jQuery we used to set up the inline datePicker. We need to bind the action of selecting a date to a javascript function which will populate the text_field. Return to your .html.erb file and replace the jQuery with:

<script type="text/javascript">
$('#date-picker').datePicker({inline:true})
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
$('#event_occurred_on').val(selectedDate.asString());
}
);
</script>

Finally, since you probably don’t want your users to see the text_field, just change it to a hidden_field.

Tags: jquery, rails