JQuery UI календарь в asp.net MVC 3 частичное представление

Question

Я создал частичное представление в своем приложении asp.net MVC 3 и хочу создать календарь Jquery UI. Я добавил этот JavaScript:

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

и HTML выглядит так:

@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>

}

Но календарь не отображается. какие-либо предложения, пожалуйста?

Answer 1

Вы динамически загружаете форму (через какое-то поведение ajax)?Ваш тег сценария находится в частичном представлении, отображающем форму?

Если вы загружаете представление динамически, поведение DatePicker не будет присоединено, поскольку оно объявлено до того, как фактическое поле добавлено в DOM.

Также правильно ли ваш скрипт прикреплен к странице (виден из источника просмотра)?Вы можете попытаться выполнить тот же код скрипта из консоли JS в браузере, чтобы проверить, работает ли он.Если он работает там, у вас есть проблемы с загрузкой представления, что означает, что скрипт загружается до того, как фактическое поле находится в DOM.

Answer 2

Трудно понять проблему, поскольку вы на самом деле не показываете HTML-код, который создается вашими помощниками.

Но я совершенно уверен, что проблема в том, что ваш селектор несоответствует любому элементу ввода:

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

Вы уверены, что есть поле с идентификатором DateOpened?Или это свойство name называется так?Попробуйте

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

Answer 3

Вместо использования .EditorFor

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

Попробуйте

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

Answer 4

Включили ли вы ссылку на скрипт плагина datepicker в содержимое вашего частичного просмотра или на главную страницу, в которой он содержится?