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 |