JQuery DatePicker MVC4 EditorFor

Мне нужно использовать datepicker в поле EditorFor.

Мой код для представления:

<div class="editor-label">
    @Html.Label("birthDate","birthDate")
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})
    @Html.ValidationMessageFor(model => model.birthDate)
</div>

script:

<script type="text/javascript">
$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

Я не могу заставить его работать. У меня есть следующая ошибка: ошибка времени выполнения Microsoft JScript: объект не поддерживает это свойство или метод datepicker.

Я уже загрузил jQuery, прежде чем попытаюсь вызвать функцию.

Ответ 1

@Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})

Не будет работать, потому что "EditorFor" не примет (перейдите к DOM) класс.

Итак, вы должны использовать "TextBoxFor" , который еще лучше примет класс или , создайте EditorTemplate для обработки любого поля, которое является DateTime, и добавьте класс там. Эта ссылка подробно описывает, как создать шаблон.

Как только у вас есть класс, работающий (может быть проверен в исходном коде), остальное просто ссылается на код jquery. Я использую

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")

и активировать его с помощью script, который у вас уже есть. Посмотрите, что имя ".datepicker" точно такое же, как класс.

Ответ 2

РедакторДля принятия класса для меня

@Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "datepicker",@Name="birthday",@PlaceHolder = "mm/dd/yyyy" } })

Разметка HTML

class="datepicker text-box single-line"

Класс - это работа.

Ответ 3

У меня была простая проблема, решаемая с помощью функциональности HTML5, которая поддерживает datetime, в вашем примере я бы предложил попробовать что-то вроде этого:

<div class="editor-label">
    @Html.Label("birthDate","birthDate")
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker", type="datetime-local"})
    @Html.ValidationMessageFor(model => model.birthDate)
</div>

Единственное, что я добавляю, это type = "datetime-local"