The jQuery website has a nice application called Themeroller that lets you customize the interface for jQuery UI widgets. There are also plenty of themes available in the gallery that you can download and use directly. Copy the stylesheet, images, the jQuery file and the jQuery-UI files into the appropriate directories and link them in the header of your HTML file.

Now let’s create a simple form that contains the text field that you want to convert into a datepicker.

<form action="index" method="get">
  <input id="date-pick" name="date-pick" type="text" value="" />
  <input id="date-submit" name="date-submit" type="submit" value="Go!" />
</form>

To convert the input field with the id date-pick into a datepicker, write the following jQuery code in the head section of your HTML.

$(function(){
  $("#date-pick").datepicker();
});

That’s it! The input field that you created now works as a popup datepicker. A calendar showing the current month appears whenever you focus on the #date-pick field and the date you click on appears as text in the field.

There are tons of options to customize the datepicker, such as changing the date format sent to the server or using a different language for the calendar. You can explore these options in the jQuery UI documentation for the datepicker.

The problem was that there was a conflict with a rails prototype helper (observe_field) that I was using in the view. Using jQuery along with other javascript frameworks such as prototype or mootools causes a namespace clash as they all use the $ alias.

jQuery provides a noconflict method to avoid this clash, which lets you rename the jQuery function ($) as something else.

In the code below, the noconflict method is called to replace the $ alias with the function name jQuery and release $ to other frameworks.

<script src="jquery.js">&lt/script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function(){
    // your code goes here.
  });
</script>

However, you can also use some other name instead of jquery by assigning jQuery.noconflict() to another variable. In the code below, I have use $jq as the new alias for the jQuery function. Now you must use this new alias where you would otherwise have used the $ shorthand.

<script src="jquery.js">&lt/script><script>
  var $jq = jQuery.noConflict();
  $jq(document).ready(function(){
    // your code goes here.
  });</script>

Using this form of the noconflict method allows you to avoid namespace conflicts while at the same time giving you the ability to use a short alias ($jq above) for jQuery.

If you want to globally disable the $ alias for jQuery, call the noconflict method from the last line of the jQuery file.

Make sure you call this function before using the conflicting library, otherwise it may still clash. However, you may include the other library without causing any conflict.