asp.net средство выбора даты mvc не работает

#jquery #asp.net-mvc #asp.net-mvc-3 #jquery-ui

#jquery #asp.net-mvc #asp.net-mvc-3 #jquery-пользовательский интерфейс

Вопрос:

Я сделал этот пример, используя видео pluralsight, но средство выбора даты просто не появляется.

1-й. Я создал шаблон.

 @model System.DateTime?
@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue,new {
    data_datepicker = true
});

2-й. Я создал строку в своем файле .js

 $(document).ready(function () {
    $(":input[data-datepicker]").datepicker();
}

Это должно быть все, чтобы заставить его работать в соответствии с видео.

Конечно, я также включаю файлы jquery

 > <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/HR.js")" type="text/javascript"></script>

Полный результирующий html (возобновленный) выглядит нормально:

 <html><head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body> 

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/HR.js" type="text/javascript"></script>



<form action="/ApplicantPosition/Create" enctype="multipart/form-data" method="post">    <fieldset>
      <div class="editor-label">
            <label for="appliedDate">Date applied</label>
        </div>

        <div class="editor-field">
            <input data-datepicker="True" data-val="true" data-val-required="Applied date is required" id="appliedDate" name="appliedDate" type="text" value="" />;

</body>

</html>

Ответ №1:

Вы не закрываете функцию document ready. Попробуйте так:

 $(document).ready(function () {
    $(":input[data-datepicker]").datepicker();
});

Обратите внимание на дополнение ); в конце моего скрипта, которого нет в вашем.

1. это работает, но средство выбора прозрачно, и я вижу другие элементы управления сзади. есть идеи?

2. @Luis, добавь соответствующий CSS. Оно не поставляется в комплекте с ASP.NET MVC 3, вам нужно будет загрузить его или использовать CDN, что еще лучше: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> . Существует также этот вариант: <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> . Конечно, есть и другие темы и цвета. Вы можете выбрать тот, который вам нравится. Взгляните на демонстрации здесь: jqueryui.com/demos/datepicker

Ответ №2:

Я думаю, вам следует сделать:

 $("input[data-datepicker='True']").datepicker();

если вы используете атрибут equals selector.
Я бы сделал:

 $("input#appliedDate").datepicker();

редактировать — это ошибка в вашей функции (вы забыли закрытие ); )

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

1. привет, круто, спасибо, есть ли способ использовать другую тему? средство выбора отображается, но оно отображается поверх других элементов управления, поэтому я могу видеть дни, а также элементы управления на обратной стороне.

2. в вашем документе ошибка.ready(): посмотрите на мой пост, я его обновляю

3. это работает, но я все еще использую элементы управления сзади. средство выбора прозрачно.