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

Just a general suggestion: you might find useful TwitterBootstrapMvc — Dmitry Efimenko
– Dmitry Efimenko, Commented Jun 25, 2013 at 22:43

cadrell0 · Accepted Answer · 2013-06-25 14:19:50Z

4

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.

edited Jun 25, 2013 at 14:19

answered Jun 25, 2013 at 14:13

cadrell0

17.4k5 gold badges55 silver badges70 bronze badges

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

Comments

Lee Bailey · Accepted Answer · 2013-06-25 14:13:42Z

1

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

answered Jun 25, 2013 at 14:13

Lee Bailey

3,6142 gold badges20 silver badges17 bronze badges

Comments

Andy Brudtkuhl · Accepted Answer · 2013-06-25 14:15:16Z

0

All you should need to do is give the appropriate "name" attribute to the bootstrap date select input that maps to the desired property in your view model.

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

answered Jun 25, 2013 at 14:15

Andy Brudtkuhl

3,6523 gold badges30 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related