[BattlFrog]

Hello and thank you for looking at my post. I am attempting to use the JQuery datepicker function in an MVC 3 application and I am unable to make it work. Here is some code:

_Layout.cshtml, Head section:

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

    <script lang="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#PersonModel_DateofBirth").datepicker({ dateFormat: 'mm/dd/yyyy' });
        });    
    </script>

Here is the date of birth portion of the View:

             <div class="editor-label">
                @Html.LabelFor(model => model.PersonModel.DateofBirth)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.PersonModel.DateofBirth)
                @Html.ValidationMessageFor(model => model.PersonModel.DateofBirth)
            </div>  

and this is how it renders the code:

<input data-val="true" data-val-required="The DateofBirth field is required." id="PersonModel_DateofBirth" name="PersonModel.DateofBirth" type="text" value="" />

I have other custom javascript functions I wrote that are working fine, so I am not sure what I am missing here. Any tips, hints or suggestions would be greatly appreciated. Thank you.

[Nakor]

Jquery datepicker is part of the jquery ui library but I don't see a reference to a jquery ui javascript file anywhere.

[BattlFrog]

Thanks Nakor, that did it. The styling is off though (no background). Do I need to style it myself or am I missing some other reference?

[Nakor]

You're also using an older version of query which I've heard may not play nice with modernizer

You need to include the jquery ui stylesheet

This post has been edited by Nakor: 09 August 2012 - 01:06 PM