2013-07-02 2 views
8

Мне нужно использовать datepicker на поле EditorFor.jQuery DatePicker MVC4 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" 
     }); 
    }); 

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

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

+0

проверить порядок jquery, можете ли вы опубликовать весь файл вида, включая скрипты? – Overmachine

+0

Можете ли вы сказать, как вы его решаете? –

+1

Я проверил порядок загрузки jquery. И затем я изменил редактор для TextBoxFor. – Rodrigo

ответ

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

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

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

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

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

и активировать его со сценарием, который у вас уже есть. Посмотрите, что имя «.datepicker» точно такое же, как класс.

2

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

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

Html разметке

class="datepicker text-box single-line" 

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

+1

Отличный ответ: D, это лучше, чем выбранный! –

0

У меня был simmilar вопрос, решается с помощью функции HTML5, который имеет поддержку DateTime, в вашем примере я бы предложил попробовать Somthing так:

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

единственное, что я addes тип = "datetime-local"

Смежные вопросы