ASP.NET MVC datetime editor

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.

You are decorating the element with dateTimePicker - this appears to be a plugin that allows the ability to select dates. I would start by checking the plugin documentation, or expand your question to include the plugin information. — Kami
– Kami, Commented Jan 14, 2015 at 10:48
i thought that it's part of jQuery,so i tried to add this, but it doesn't help,deleting this part changes nothing. — Alex Tertyshnyk
– Alex Tertyshnyk, Commented Jan 14, 2015 at 10:54
@Alex Though I am not sure which dateTimePicker you are using, but if you have included BootStrap on your page, you can try this — Siva Gopal
– Siva Gopal, Commented Jan 14, 2015 at 10:56

Maris · Accepted Answer · 2015-01-14 12:06:15Z

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>

answered Jan 14, 2015 at 12:06

Maris

4,7866 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Tertyshnyk Over a year ago

thank you,it helped. but i added script to file and than added file to bundle.

Maris Over a year ago

Yeap, using scripts inside views is not the best way, better to hold in separate files. I just wrote to show how to fix your problem and what is the reason.

Collectives™ on Stack Overflow

ASP.NET MVC datetime editor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related