Home Web Development Bootstrap Solution to: How do I use a jQueryUI-style datepicker with Bootstrap 3...

Get social!

Chrome respects the “type=date” tag for an input element, so if you want to add a date widget, you can just do this:

The above will render something like this (using Chrome’s built in calendar widget): Bootstrap type="date" rendering Ugh. I don’t like it. Not only is it kind of ugly, it isn’t very functional, either. After you select the date, there isn’t any “Close” button and the calendar doesn’t automatically close. Not good. Of course, you could just use the jQueryUI library, but I’ve had problems mixing it with Bootstrap in the past. Oh yeah, it’s bulky too. What to do?

Solution

(Note: This solution is a bit meandering because each time I thought I had the problem solved, I was wrong. Check out this post for a more concise answer to a similar question.)

Fortunately, the giving soul at the site below has created a nice date picker designed to work with Bootstrap: http://www.eyecon.ro/bootstrap-datepicker/ Download and unzip the source to your javascript folder, then in your <head> section add this:

Next, update the original form element to something like this:

Basically, I just added the datepicker class and removed the type=”date” attribute in the line above.

Finally, I added the following javascript to the page:

That’s did it! Perhaps not quite as pretty as jQueryUI’s datepicker object, but close enough for rock ‘n roll!

Caveat

You need jQuery for this to work. But you already new that.

Update

I had a heck of a problem getting the calendar to show up on one of my pages. I finally had to go code-sniffing to figure out what was going on. Turns out if you place the datepicker input inside a div (or any element) with a high z-index css value — maybe any value — the calendar gets hidden behind the div. I added a z-index: 100000; to my “datepicker” class to solve the problem.

Update #2

After setting up the datepicker (and writing this post), I realized that the calendar didn’t close after you clicked on a date. Also, the keyboard controls came up when I tapped the text input on a mobile device.

The solution to the first problem was to modify the datepicker code as such:

Note the dp.on() function. That’s what closes the calendar.

The second issue about the keyboard controller lead me to write another post on how to solve it.

Note

Sorry for the circuitous route this post has taken, but I write these while I’m solving the problem. Or better said, “I write these while I think I am solving the problem.” That means that when things don’t turn out exactly as planned, I need to update these posts, but I am too busy (lazy?) to actually rewrite them, hence the Update sections.

Leave a Reply

Bad Behavior has blocked 22 access attempts in the last 7 days.