ASP.NET MVC日期時間編輯器

Question

我正在學習ASP.NET MVC，我想爲日期和時間創建編輯器。

這裏是我的我的觀點的模型

[Display(Name = "Activity Date")] 
[DataType(DataType.DateTime)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd hh:mm}", ApplyFormatInEditMode = true)] 
public DateTime activityDate { get; set; }  

和零件的零件現在

@Html.EditorFor(model => model.activityDate, new { htmlAttributes = new { @class = "dateTimePicker form-control" } }) 

當我試圖編輯該字段的數據只是一個字符串，但是如果我改變模型像這樣：

[Display(Name = "Activity Date")] 
[DataType(DataType.Date)]//changed line 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd hh:mm}", ApplyFormatInEditMode = true)] 
public DateTime activityDate { get; set; } 

編輯變得幻想着能夠通過鼠標滾輪滾動和改變數值設計datePicker，但無法設置時間。

我可以同時獲得花哨的外觀和UI以及改變時間的能力嗎？我想使用這個datetime picker for jquery。 這裏是我的html，我在瀏覽器

<input class="form-control text-box single-line" data-val="true" data-val-date="The field Activity Date must be a date." data-val-required="The Activity Date field is required." id="datetimepicker" name="activityDate" type="datetime" value="2015-01-14 12:00"> 

得到渲染，這是我的觀

<script>jQuery('#datetimepicker').datetimepicker();</script> 
@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/dateTimePicker") 
} 
@Styles.Render("~/Content/dateTimePicker1")` 

一部分，但它slill不起作用。

Answer 1

只需更改訂單，並添加document.ready。沒有：

<script>jQuery('#datetimepicker').datetimepicker();</script> 
@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/dateTimePicker") 
} 
@Styles.Render("~/Content/dateTimePicker1")` 

但是：

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/dateTimePicker") 
} 
@Styles.Render("~/Content/dateTimePicker1")` 
// type='text/javascript' will allow to work it in IE7 
<script type="text/javascript"> 
    // that will help you to be sure that script will execute just when document is ready 
    $(document).ready(function(){ 
     $('#datetimepicker').datetimepicker(); 
    }) 
</script>