2015-04-18 2 views
1

Я новичок в mvc4. Я хочу добавить время в mvc4 с помощью JQuery.Как добавить время в MVC4 с помощью JQuery?

Я следую этой обучающей программы http://weareoutman.github.io/clockpicker/

Назначение Модель

[DataType(DataType. DateTime)] 
[DisplayFormat(ApplyFormatInEditMode = true)] 
[Display(Name = "TimeOfDrAvailablity")] 
public DateTime TimeOfDrAvailablity { get; set; } 

[Required] 
[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:dd-mm-yyyy}", ApplyFormatInEditMode = true)] 
public System.DateTime Date { get; set; } 

Создать Просмотр

<div class="form-group"> 
    @Html.LabelFor((model => model.Date), new { @class = "col-sm-2 control-label" }) 
    @Html.TextBoxFor(model => model.Date, new { @class = "datefield", type = "date" }) 
    @Html.ValidationMessageFor(model => model.Date) 
</div> 

<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"> 
    <input type="text" class="form-control" value="13:14"> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-time"></span> 
    </span> 
</div> 

, но я хочу использовать что-то вроде этого

<div class="form-group"> 
    @Html.EditorFor(model => model.TimeOfDrAvailablity, new { @class = " clockpicker", type = "date" }) 
</div> 

Script

@section Scripts{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true, minDate: -20, maxDate: "+1M +10D" }); 
      $('.clockpicker').clockpicker(); 
     }); 
    </script> 
} 

В моем макете

<!--clockpicker --> 
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap-theme.css") 
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap.css") 
@Styles.Render("~/Areas/Backend/clockpicker/css/bootstrap.min.css") 

<!--clockpicker --> 
@Scripts.Render("~/Areas/Backend/clockpicker/js/bootstrap.js") 
@Scripts.Render("~/Areas/Backend/clockpicker/js/highlight.min.js") 
@Scripts.Render("~/Areas/Backend/clockpicker/js/html5shiv.js") 
@Scripts.Render("~/Areas/Backend/clockpicker/js/jquery.js") 
@Scripts.Render("~/Areas/Backend/clockpicker/js/respond.min.js") 

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 
@Styles.Render("~/Content/themes/base/css") 
@RenderSection("scripts", required: false) 
+2

Вы не можете добавлять атрибуты html с помощью 'EditorFor()' с MVC-4 (вам нужно добавить меньше MVC-5.1). И почему вы добавляете 'type =" date "?? Просто используйте '@ Html.TextBoxFor (m => m.TimeOfDrAvailablity, new {@class =" clockpicker "})' И добавление атрибутов '[DataType]' и '[DisplayFormat]' к свойству немного бессмысленно, если вы используют плагин –

+1

@ Stephen Muecke Я пытаюсь '@ Html.EditorFor (m => m.TimeOfDrAvailablity, new {@class =" clockpicker "})', но все равно он не работает – User26

+0

НЕТ, он должен быть '@Html. TextBoxFor (m => m.TimeOfDrAvailablity, new {@class = "clockpicker"}) '. Но в любом случае свойство yout 'TimeOfDrAvailablity' является typeof' DateTime', но этот плагин генерирует только значения в формате 'hh: mm:', который в любом случае не будет привязан к вашему свойству. –

ответ

0

вот мой ответ может быть, это поможет другим.

  1. i добавлено @Scripts.Render("~/bundles/jquery") в <head> тег.
  2. @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") @RenderSection("scripts", required: false) до <body>.

3.также удалить dublicate jquery.js файлов.

4.last, но очень важный Орден Jquery файл .i.e jquery.js должен быть загружен первый, а затем jquery-ui.js.

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