JQuery UI datepicker in Asp.Net MVC

Question

I have tried to use some of the widgets in JQuery UI on an Asp.Net MVC site without luck.

For example the basic datepicker from jQuery UI - functional demos.

I have created a simple MVC project and added the script references in Site.Master like this:

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

In the Index.aspx file I have cleared all default content and added the following:

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/> 

The core jQuery works fine. Any clues?

Answer 1

Make sure your initializer is called after the DOM is loaded:

$(document).ready(function() {
    $("#basics").datepicker();
});

jQuery ready event:

By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when 99.99% of all JavaScript code needs to run.

Answer 2

I've got a write-up of this with MVC 3 here: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx