JQuery datepicker not working

Question

I'm completely new to JQuery and MVC.

I'm working on a pet project that uses both to learn them and I've hit my first snag.

I have a date field and I want to add the JQuery datepicker to the UI. Here is what I have done:

Added <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> to the site.master

Inside my Create.aspx (View), I have

  <asp:Content ID="Create" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Create a Task</h2>
    <% Html.RenderPartial("TaskForm"); %>
  </asp:Content>

and inside "TaskForm" (a user control) I have:

<label for="dDueDate">
            Due Date</label>
        <%= Html.TextBox("dDueDate",(Model.Task.TaskID > 0 ? string.Format("{0:g}",Model.Task.DueDate) : DateTime.Today.ToString("MM/dd/yyyy"))) %>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#dDueDate").datepicker();
            });
        </script>

As you can see, the above checks to see if a task has an id > 0 (we're not creating a new one) if it does, it uses the date on the task, if not it defaults to today. I would expect the datepicker UI element to show up, but instead I get:

"Microsoft JScript runtime error: Object doesn't support this property or method" on the $("#dDueDate").datepicker();

Ideas? It is probably a very simple mistake, so don't over-analyze. As I said, this is the first time I've dealt with MVC or JQuery so I'm lost as to where to start.

Answer 1

datepicker() is a jQuery UI method, it looks like you are only using jQuery.
You need to download and include jQuery UI in addition to jQuery

Make sure you download the version compatible with jQuery 1.3.2.

Answer 2

You have included jQuery library, but not jQueryUI library. You have to do that with something like this:

<script src="../../Scripts/jqueryui-1.8.1.min.js" type="text/javascript"></script>

Answer 3

You'll need to include JQuery UI as well to get datepicker.