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


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

Related videos on Youtube

Author by


Master student of Web Science. Block chain and Machine Learning enthusiast

Updated on September 16, 2022


  • Cybercop
    Cybercop 9 months

    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; }
      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>
                <script type="text/javascript">
                    $(document).ready(function() {
                            format: 'dd/MM/yyyy hh:mm:ss',
                            language: 'en',
                            pick12HourFormat: true
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>

    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.

    public ActionResult Create(fooVM user)
        if (ModelState.IsValid) {

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