Jquery UI calendar in asp.net MVC 3 partial view

Question

I have created a partial view in my asp.net MVC 3 application and want to create a Jquery UI calendar. I have added this javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#DateOpened").datepicker(
            {
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true,
                yearRange: startYearRange + ':' + endYearRange
            });
    });
</script>

and HTML looks like this:

@using (Ajax.BeginForm("UpdateAccountDetails", null))
{
 <div class="editor-label">
                    @Html.LabelFor(model => model.DateOpened)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.DateOpened)
                    @Html.ValidationMessageFor(model => model.DateOpened)
                </div>

}

But it is not showing the Calendar. any suggestions please ?

Answer 1

Are you dynamically loading the form (through some kind of ajax behaviour)? Is your script tag inside the partial view that renders the form?

If you load the view dynamically, then datepicker behaviour won't be attached, because it's declared before the actual field is added to DOM.

Also is your script attached to the page correctly (visible from view source)? You can try to execute that same script code from some JS console inside browser to see if it's working. If it's working there, then you have issues in loading the view, meaning script gets loaded before the actual field is in DOM.

Answer 2

您是否在部分视图的内容或其中包含的母版页中包含了对datepicker插件脚本的引用？

Answer 3

It is difficult to understand the issue since you don't actually show the HTML code that is being produced by your helpers.

But I'm quite sure the problem here is that your selector doesn't match any input element:

 $("#DateOpened").datepicker(...)

Are you sure there is a field with id DateOpened ? Or is it the "name" property that's called like this?? Try

 $("*[name=DateOpened]").datepicker(...)

Answer 4

Instead of using .EditorFor

@Html.EditorFor(model => model.DateOpened)

Try

@Html.TextBoxFor(model => model.DateOpened, new { id = @DateOpened })