MVC4 Html.EditorFor for Date using Twitter Bootstrap

Question

I´m using MVC4 Razor to build an entry box for a Date only field. Here is my code:

    @Html.EditorFor(model => model.StartDate, new { @class = "form-control", type = "text" })

For StartDate , I have the following definiton:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
public DateTime StartDate{ get; set; }

What happens is that the box does not get formatted by form-control, using a pure HTML entry style.

I´ve tried changing text for date, but it does not work for IE as this is a non supported feature... And my app has to work with IE also.

I know MVC5 has some changes on that area, but I can´t use it from project requirements. It shall be MVC4.

How can I make the data entry style as form-control as expected?

Answer 1

Adding attributes only works in MVC 5.1, so you are correct, that isn't going to work. You could add a EditorTemplates folder to the /Views/Shared folder, and there put an editor for DateTime, and define the HTML control however you please. In your template you could define:

//DateTime.cshtml
model System.DateTime

@Html.TextBox("", Model.ToShortDateString(), new { @class = "form-control" })

Answer 2

My solution was to add a EditorTemplate in /Views/Shared, adding the bootstrap datepicker (from here ) and the following code:

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty, new { @class = "form-control" })
<script type="text/javascript">
    $(function () {
        // target only the input in this editor template
        $('#@Html.IdForModel()').datetimepicker({
            pickTime: false
        });
    });
</script>

Working fine... With datepicker....