ASP.NET MVC 日期时间编辑器

ASP.NET MVC datetime editor

我正在学习 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")`

但是还是不行。

只需更改顺序,并添加 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>