MVC : Binding datetime value (bootstrap datetime picker) from view to model

Question

I want to bind the date time value that I get from view to my model, so that I could use to save it in database.
Note: Currently I'm using bootstrap datetime picker to get date time value.
Let us say I have a ViewModel called foo

public class fooVM
{
  public string Name {get; set; }

  [DataType(DataType.DateTime)]
  public DateTime DateEntered {get; set}
}

based on this I have a view

@model User.Model.fooVM
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
@section Datetime
{
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
    <link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
}
  @using (Html.BeginForm("Register", "Account", FormMethod.Post))
    {

            <div class="input-block-level">@Html.TextBoxFor(model => model.Name</div>


           <div id="datetimepicker2" class="input-append date">
                    <input data-format="dd/MM/yyyy HH:mm:ss PP" type="text"/>
               <span class="add-on">
                   <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
               </span>

                </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    $('#datetimepicker2').datetimepicker({
                        format: 'dd/MM/yyyy hh:mm:ss',
                        language: 'en',
                        pick12HourFormat: true
                    });
                });
            </script>
        </div>

    }
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
</fieldset>

Now this would give me the date time picker in view but the value would not bind to my DateEntered value in model.

If I wanted to do get the value from view for date time and save it may be in database, how would i do it? so that if i executed following command in my controller it would work.

[HttpPost]
public ActionResult Create(fooVM user)
{
    if (ModelState.IsValid) {
       _db.Users.Add(user);
       _db.SaveChanges();
}

PS: This could be possible value in database
Name : ABC
DateEntered : 6/14/2013 9:34:23 AM

Solution 1

If you set the Name attribute on your input, I believe MVC will match that to the property on your model with the same name.

Alternatively, you can use HtmlTextBoxFor helper and use the htmlAttributes parameter to set data-format. Something like @Html.TextBoxFor(model => model.DateEntered, new { data_format = 'dd/MM/yyyy HH:mm:ss PP'});

Here is the MSDN for this overload.

Solution 2

You need to give the input tag a name that corresponds to a property in your model, like this:

<input name="DateEntered" data-format="dd/MM/yyyy HH:mm:ss PP" type="text"/>