Thursday, December 9, 2010

jQuery UI datepicker in Rails

I have spent lot of time in making this. The problem was there was conflict in the prototype & Jquery. This is how i did it,

Step 1:

Download jquery.ui.datepicker.js from jquery UI and add it in Javascripts folder.

Step 2 :

Add these in Layout,

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.datepicker.js"></script>
<script>
jQuery(function() {
jQuery("#datepicker").datepicker();
});
</script>

Note: instead of $(function) i have used jQuery(function)

Step 3 :

Then the View file, use,
<%= text_field_tag "datepicker" %>

Note :

If you get this error, "jquery ui $(input).zIndex is not a function"

1. Go to the datepicker JS & comment out the line where you get the error.
2. Add .ui-datepicker {z-index: 3000;} in ur stylesheet

No comments: