Home Web Development Bootstrap Solution to: On a webpage form, how do I use the native...

Get social!

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).

Solution

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.

The trick is to test if the user is using a mobile device, then display either the mobile device’s inherent date picker, or the custom date picker from above. To do it, first download and install the date picker code from the link above. Then, you can use the following code to accomplish the task (thanks to stackoverflow.com for some nifty device detection javascript/jQuery code):

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.

Leave a Reply

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