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.
11 Comments to Inline jQuery datePicker and Rails
Leave a Reply
About Justin
Justin has been obsessing over writing simple Web software using Ruby on Rails since 2007. He's also an entrepreneur and Lean Startup expert. Learn more
Search
Recent Posts
- Not Having a Plan B Makes Plan A More Successful
- Easy Rails API Authentication Using restful-authentication
- God Init.d Script for CentOS
- Private, Authenticated RSS Feeds in Rails
- A Private Web Beta in Seconds with Prefinery
- Backup Your WordPress Blog to Amazon S3 using Ruby
- How to Set an Expires Header in Apache
- How to Configure Apache to Gzip Your Components
Categories
Launch a private beta for your Web application in minutes. Prefinery takes care of collecting e-mail addresses, generating invitation codes, and sending invitations for your private beta. Your customers never leave your site, and e-mail invitations are sent from your address.
Justin is Founder and CEO of Prefinery.
I got as far as this page helps with, but what I really need is to be able to set what date the date picker starts on. I can’t find how to update the calendar after setting a new date – everything assumes it will just be updated when the calendar is displayed – in other words, using it inline seems to have been an afterthought.
I got it working:
(I am using PHP)
Here is how I initiate the datepicker:
$(‘#eventDate’).datePicker({inline:true,startDate:’2006-01-01′,month:js_month;?>,year:js_year?>})
Which displays the appropriate month. Then I select the correct date:
$.each($(“td .current-month”), function(){
if($(this).text() == js_day;?>){
//alert($(this).text());
//alert($(this));
$(this).click();
}
});
I got it working. First starting datepicker to display the correct month:
[code]
$('#eventDate').datePicker({inline:true,startDate:'2006-01-01',month:js_month;?>,year:js_year?>})
[/code]
then triggering click on the correct day:
[code]
$.each($("td .current-month"), function(){
if($(this).text() == js_day;?>){
//alert($(this).text());
//alert($(this));
$(this).click();
}
});
[/code]
I found a solution, but I can’t seem to post anything with js in it. Basically I used “month” and “year” options in the datePicker function to set the correct starting day and month, and than used jquery each function to go through every td .current-month and check its text() value against the day in question. Once it finds it, it triggers its click event.
If you mean that you want to set the start date of the datepicker, to not allow the user to pick a date earlier than the start date, then you just use the startDate attribute as follows:
$(‘#date-picker’).datePicker({inline:true, startDate: ’2008-01-01′})
.bind(
‘dateSelected’,
function(e, selectedDate, $td)
{
$(‘#event_occurred_on’).val(selectedDate.asString());
}
);
If you want to set the default date of the hidden text field to today, do:
$(‘#event_occurred_on’).val(new Date().asString());
Thanks !
Hey i guyz i need your help,
I have a text field and the inline date picker whenever i click on the date in the datepicker it gets populated as expected, the datepicker and the text field are in a pop up window, now here is the problem i want the inline datepicker to select date which is in the text field (the value to the text field is provided by its parent window) but currently the inline datepicker selects the current days date whenever the pop up window is launched and yes i tried the attribute ‘dateText’ but its of no help this applies only for the dialog datepicker.
Any help is appreciated
Thanx!!!
I have the same problem with sushil, but I haven’t found the solution yet. Please helping. Thx!
I dunno about you, but I tried this and it didnt work. I figured out that the datepicker.js also requires the date.js library from here: http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/methods/date.js
Hi Guys,
I have one query regarding the date picker. When I click on the inline calender which is already one selected date present,to pick a date, after selecting the new date when I do cancel, next time when I open this calender once again, it shows me the newly selected date, which I dont want. When I am doing cancel it should show me old selected date
You can also use this with formtastic:
http://blog.brzezinka.eu/webmaster-tips/ruby/ruby-on-rails-formtastic-jquery-ui-datepicker/comment-page-1#comment-48