How to post date and time to server? - asp.net-mvc

Question

I'm using the bootstrap datetimepicker library like so:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="datetimepicker2" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
This is another try:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
#Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
JQuery:
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
The first chunk of code where the divs are used, work fine when selecting a date and time. But the second one with the razor syntax doesn't.
When using the first chunk for selecting a date and time, it's not posted to the server when button is pressed.
The model only contains the 2 dates:
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
Does anyone see what I might be doing wrong here?
EDIT
With "it doesn't work" when using the Razor syntax, the datetimepicker just didn't show up, nothing happened. Now I have been testing some further, i get a runtime error pointing to this line in the datetimepicker.min.js file:
offset.top=offset.top+this.height;
And this is the error message it pops up in a dialog:
Unhandled exception at line 26, column 5290 in
http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'top' of
undefined or null reference
This is the rendered html of the form:
<form action="/Home/Search" method="post"> <div id="searchContainer">
<select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
<option value="5">test4</option>
<option value="6">test5</option>
</select>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<button class="btn btn" type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
<style type="text/css">
#searchContainer {
margin-top:10%;
}
</style>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>

Answer 1

Your first approach has the problem, that you omitted the name attributes for the input fields. The name attribute defines what variable is posted by the form.
Just write :
<input ... type="text" id="StartDate" name="StartDate />
For your second try:
But the second one with the razor syntax doesn't.
What do you mean with doesn't work? Can you show the rendered HTML?

Answer 2

For the second try:
If you look at the documentation for bootstrap datetime-picker, it shows that the id attribute #datetimepicker1 should be applied to the container of the input. Instead you are applying it to the input itself.
Also it seems that attributes data-time-icon="icon-time" data-date-icon="icon-calendar" need to be applied to the <i> tag, which TwitterBootstrapMVC does not do out of the box.
Either submit an issue to the TwitterBootstrapMVC to add an overload to .IconAppend method to also take Icon class that you'd be able to customize however you want... or better yet, fork it make the necessary change and submit a pull request.

Answer 3

I changed my model to accept a string instead of a DateTime object, and that fixed it.