Custom editor using Twitter.Bootstrap.Mvc4

Twitter.Bootstrap has tons of extensions that are available to anyone using Twitter.Bootstrap.Mvc4 [1]. As an example, here are the steps to add a date picker [2] to your Asp.Net Mvc4 app using Twitter.Bootstrap.Mvc4.

Create an empty Mvc4 web project and let’s start from the sample that comes with Twitter.Bootstrap.Mvc4:

Install-Package twitter.bootstrap.mvc4.sample

Download the date picker [3] and include .js and .css files in your project. Add them to the BootstrapBundleConfig:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/js").Include(
        // ...
        , "~/Scripts/bootstrap-datepicker.js"
        ));

    bundles.Add(new StyleBundle("~/content/css").Include(
        // ...
        , "~/Content/datepicker.css"
        ));
}

Create an editor template named in ~/Views/Shared/EditorTemplates named Date.cshtml:

@model DateTime
@Html.TextBox("", Model, new {@class = "datepicker"})

Make sure to add the datepicker class. The file should be named Date.cshtml and not DateTime.cshtml, because the HomeInputModel.StartDate property is decorated with the data annotation [DataType(DataType.Date)].

Finally add the Javascript code that hooks the datepicker text boxes:

$(document).ready(function() {
    $('.datepicker').datepicker();
})

Done.

Footnotes

[1]http://nuget.org/packages/twitter.bootstrap.mvc4
[2]http://www.eyecon.ro/bootstrap-datepicker/
[3]http://www.eyecon.ro/bootstrap-datepicker/datepicker.zip