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): 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?
(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.)
4a78abb26c3c703083357e219e11fb06001Next, 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.
That’s did it! Perhaps not quite as pretty as jQueryUI’s datepicker object, but close enough for rock ‘n roll!
You need jQuery for this to work. But you already new that.
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.
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.
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.