More about twitter bootstrap datepicker

I have blogged about the bootstrap datepicker earlier. Here is the link

I personally find that is pretty annoy after you select the date, the calendar popup doesn’t disappear.

So I put some extra code in the on change event, to hide it.

$('#SelectedDate').datepicker({ format: "dd/mm/yyyy" }).on('changeDate', function (ev) {

If you don’t set blur(), the textbox will not lose focus and if you click the textbox again, the calendar popup will show.

And then hide the datepicker.

So what I have done here, is lose the focus and hide it.

Adding a hyphen to the html attribute using html helpers, MVC3

The “data-*” is the custom data attributes in HTML5, it gives the ability to embed custom data attributes on all HTML elements and allows javascript to create a richer, more engaging user experience.  You can learn more about the usage of this “data-*” from here

I experience a problem of adding “data-*” to html tags by using the html helpers. I am using a datepicker from bootstrap and in the input tag, it specifies the “data-datepicker”.

<input id="SelectedDate" name = "SelectedDate" data-datepicker="datepicker" class="small" type="date" />

When I convert the html input tag to Html.TextBox helper class. It won’t pass the validation of razor engine’s syntax.

@Html.TextBoxFor(p=>p.SelectedDate, new {@class="small", type="date", data-datepicker = "datepicker"})

To work around this, you need to create a strongly typed Dictionary<string, object> and pass it to the Html.TextBox html attributes.

@Html.TextBoxFor(p => p.SelectedDate, new Dictionary<string, object> { { "class", "small" }, { "type", "date" }, { "data-datepicker", "datepicker" } })

This resolves the issue of having “data-*” custom data attributes while using mvc razor engine views.

Bootstrap from Twitter is missing a date-picker

Bootstrap is awesome, light weight. I think it is a great replacement of JQuery UI. But there are still a few elements missing from Bootstrap. Such as the very important one: date picker.

I found someone has done a plugin for it. It is pretty cool.

Here it is.

To create a date picker, write the markups as follow,

    <div class="input-append date" id="dp3">
    <span class="add-on"><i class="icon-th"></i></span>


Call the javascripts,


There are a few events that you can register as well,


This event fires immediately when the date picker is displayed.


This event is fired immediately when the date picker is hidden.


This event is fired when the date is changed.

    .on('changeDate', function(ev){
    if ( < startDate.valueOf()){


Good stuff!