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

编辑器变得很花哨，能够通过鼠标滚轮滚动和精心设计的日期选择器更改值，但无法设置时间。

我能否同时获得精美的外观和 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")`

但它仍然不起作用。

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>