Bootstrap 3 Datepicker (eonasdan) does not work with jQuery 3.0 or above

if you are developing MVC, and you might have chance to look for a DateTimePicker for your MVC project. One of the favorites DateTimePicker is “Bootstrap 3 DatePicker” developed by Eonasdan (http://eonasdan.github.io/bootstrap-datetimepicker/ ). You may download and get it from Nuget. You may also install by using Bower, Rails, Angular, Meteor or manually. The latest version in Nuget is v4.15.35.1.

nuget_bootstrapdatepicker

One of the dependency is the jQuery. I have installed the latest one jQuery v3.1.1 at the moment I am writing to this blog.

I have followed the sample code Eonasdan has provided but I could not make it working. After some searching, I found out that Eonasdan has developed it when jQuery was still in v2. And jQuery has some changes from v2 to v3. One of the changes is jQuery does not provide the object.count() for jQuery object. It is changed into object.length

So, now you could make some code changes to the bootstrap-datetimepicker.js and the DatePicker will be working again. There are 2 locations of code that you have to change. Just simply search for “count()” and replace it as “length”.

Hope that my blog will help you to fix it. And as I know, someone has also point this out to the GitHub and commit into a new branch. But Eonasdan has not yet merge it into the release branch. Let’s do this fix in our way before he release the fixed code so that we could get a corrected js from Nuget.

bootstrapdatepicker_js_before
bootstrapdatepicker_js_after

Set menu item to Active in MVC with BootStrap

Recent I start working on MVC with BootStrap for building the great Web UI. I am building a menu with several menu items and found out that it is not setting as “active” in the class of the item when a page is loaded.

BootStrap_menu_01

By default the MVC template doesn’t add the active class to the “li” item in the menu. So I have to add the class=”active” to the “li” to indicate the active menu item.

BootStrap_menu_02

Above is the code that is used for the actual menu that create the menu in the first screenshot. if you look at line 8, you will see the class=”active”, this is what makes the active menu item. In order for us to do this, we need to know what page is currently loaded and then apply the active class css to the corresponding “li” element. The best way to do this, is to create a HTML helper to handle this for us.

Now, let’s try to create a new folder in the project and called “Helpers”. Then add a new class named “HtmlHelpers.cs” (from my sample, I used KenLinHtmlHelpers). here we could create an extension method of the HtmlHelpers method. We do this by creating a static class.

BootStrap_menu_03

As you can see, I have created 2 method, IsActive and IsActiveController. The only difference is, do you want to take Action into one of the input parameter. If you want to set class is active whenever it is in the specific controller, you could use IsActiveController. Otherwise, you may use IsActive if you want the active class only in exactly the specified Action and Controller. Please also note that, I am letting the activeClass and inActiveClass input as optional with a default value.

Now we could update our cshtml as below,

BootStrap_menu_04

Look carefully on each “li” item now. There is a new HtmlHelper method to check and show if it is the active controller.  Please also look carefully, I have also called the method in line 9, for the parents of the dropdown Menu.

NOTE: You have to reference the class in the top of the view page that you are using the IsActive or IsActiveController method in. Just add the code as line 1 of the above screenshot.