ASP.NET MVC日期时间编辑器

Question

I'm learning ASP.NET MVC and I want to create editor for date and time.

Here is the part of my model

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

and part of my view

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

Now when I am trying to edit this field data is just a string, but if I change model like this:

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

The editor becomes fancy with ability to change values by mouse wheel scrolling and a well designed datePicker, but with out ability to set time.

Can I get both fancy look and UI and ability to change time?

i tried to use this datetime picker for jquery . Here is my html that i get rendered in browser

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

and this is part of my View

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

but it slill doesn't work.

Answer 1

Just change the order, and add document.ready . Not:

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

But:

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