ASP.NET MVC 5 @Html.EditorFor and javascript datepicker

Question

I'm using this MVC 5 code:

<div class="form-group">
    @Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Expiry_date, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Expiry_date, "", new { @class = "text-danger" })
    </div>
</div>

And I would like to replace it with a datepicker like this one and still using the @Html.EditorFor() statement:

<div class="form-group">
    @Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <a href="javascript:;" 
            id="vacation" 
            data-type="date" 
            data-viewformat="yyyy-mm-dd" 
            data-pk="1" 
            data-placement="right" 
            data-original-title="Expiry date"> 
                2016-03-28 
        </a>
    </div>
</div>

Answer 1

You can take the code for the desired datepicker that you have above and add it to the MVC Shared > EditorTemplates folder. You can add it as a new editor or overwrite an existing DateTime editor if you have one.

The editor templates in that folder are the ones used by MVC when you call @Html.EditorFor(...), and you can pass in an optional string to the call to force MVC to use a specific template.

See this MSDN article for more info. https://msdn.microsoft.com/en-us/library/ee292027(v=vs.118).aspx

Answer 2

If you have the datepicker .js file downloaded.. all you have to do is render it in your _Layout View <script src="~/FolderName//*js file*/" .. then in your HTML:

<div class="form-group">
    @Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Expiry_date, new { htmlAttributes = new { @class = "form-control datepicker" } })
        @Html.ValidationMessageFor(model => model.Expiry_date, "", new { @class = "text-danger" })
    </div>
</div>

Answer 3

I would like to propose an alternate suggestion to creating an EditorTemplate: Create an extension method instead. This will allow you to provide some overrides as well where needed. I just pasted your example in there with a couple of placeholders (could would need to be tweaked and tested).

public static MvcHtmlString DatePickerFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, DateTime>> expression, string controlId, string title)
{
    // you could get additional model info from the metadata object
    // var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); 

    Func<TModel, DateTime> method = expression.Compile();
    var date = method(htmlHelper.ViewData.Model);
    var str = $"<div class=\"col-md-10\"><a href=\"javascript:;\" id=\"{controlId}\" data-type=\"date\" data-viewformat=\"yyyy-mm-dd\" data-pk=\"1\" data-placement=\"right\" data-original-title=\"{title}\">{date.ToString("yyyy-MM-dd")}</a></div>";
    return new MvcHtmlString(str);
}

You can then call this from your view:

<div class="form-group">
    @Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DatePickerFor(model => model.Expiry_date, "someId", "some title")
        @Html.ValidationMessageFor(model => model.Expiry_date, "", new { @class = "text-danger" })
    </div>
</div>