jQuery DatePicker MVC4 EditorFor

Мне нужно использовать средство выбора даты в поле 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 type="text/javascript">
$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

I can't make it work. I have the following error: Microsoft JScript runtime error: Object doesn't support this property or method 'datepicker'.

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


asp.net-mvc-4 jquery-ui-datepicker editorfor
person Rodrigo    schedule 02.07.2013    source источник
comment
проверьте порядок jquery, не могли бы вы опубликовать весь файл представления, включая сценарии?   -  person Overmachine    schedule 03.07.2013
comment
Можешь написать как ты это решаешь?   -  person Ricker Silva    schedule 04.02.2014
comment
Я проверил порядок загрузки jquery. А потом я сменил EditorFor на TextBoxFor.   -  person Rodrigo    schedule 26.02.2014

Ответы (3)


arrow_upward
9
arrow_downward 

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

и активировать его с помощью уже имеющегося у вас скрипта. Следите за тем, чтобы имя «.datepicker» точно соответствовало классу.

person Greg Little    schedule 17.04.2014

arrow_upward
4
arrow_downward

EditorFor принять класс для меня

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

HTML-разметка

class="datepicker text-box single-line"

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

person Julian89757    schedule 19.08.2015
comment
Отличный ответ :D, это лучше, чем избранный! - person Federico Navarrete; 01.02.2017

arrow_upward
1
arrow_downward

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

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

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

person Goran.Mards    schedule 08.03.2018