When writing another solution for “How do I use a jQueryUI-style datepicker with Bootstrap 3 (but without using jQueryUI)?”, I found that a problem with a datepicker on a mobile device is that the device’s keyboard control will display on a text input, partially hiding the calendar.
Searching the web, I found that many people used the “readonly” property of a a text input to work around this issue. OK, but then the text input is grayed out. That might be confusing to the user. I supposed I could add some css to overcome (maybe), but I wasn’t sure if that would work on all devices.
I also thought I might be able to use jQuery’s <event>.preventDefault() to inhibit the keyboard display when the user tapped the input, but that didn’t work (I’m testing on an iPhone 5, by the way).
The solution was to change my perspective of the problem. For mobile devices, instead of using a custom date widget and worrying about the keyboard display, why not just show the device’s built in date selector? Turns out the type=date attribute in the <input> tag does just this. However, when you view the object using a desktop browser (I’m testing with Chrome), you get whatever date picker the browser uses (or no date picker at all, if you are using an older browser). That’s were this date picker created specifically for use with Bootstrap comes in handy.
In the <head> section:
(Note that the code above lists the type as “text“.)
In the header/body/wherever:
Note that before jQuery 1.9 you couldn’t change an object’s type. If you are using an older version of jQuery, try this instead (untested):
The code will break in earlier versions of IE, but users of earlier versions of IE will never get to that code, because they won’t be using mobile devices, I think. Anyway, they should upgrade if they are.