[Clock Picker] Prevent mobile keyboard from popping up

Forge Component
Published on 2015-06-03 by Grazina
3 votes
Published on 2015-06-03 by Grazina


I have a page with a time input widget. I have a jquery clockpicker webblock bound to the time input widget. I want the jquery clockpicker to pop up when the user taps the date input widget. The user must then be able to pick the time and close the clock by tapping "Done" on the clock.

This is working great, but each time the user taps the time input widget, both the clock and the mobile device's keyboard pops up. The keyboard overlays the clock, so the user first have to close the keyboard before using the clock.

(I am using the jquery clockpicker by Grazina found on the forge.https://www.outsystems.com/forge/component/905/clock-picker/)

My question is: How I can prevent the mobile keyboard from popping up when the time input widget is selected?



Hi Vonnelize,

Didn't try it, but a quick google search and all the solutions that I see tell to put the input as read-only. (and then to try with css to make it look like it isn't). So you could try to set the "Enabled" property to false and see if the component still opens the clock.

Another alternative would be to not use this component on mobile devices (checking for example if the user agent contains "mobile" and surrounding the block with that condition).

 Instead for mobiles set on the input an extended property called Type and set it to "Time". That will make the native clock picker to be launched on the device. It would look different that the experince of your app on a desktop, but will give a consistent look and feel to a user that is used to time pickers on his phone.

See here my demo with a input with Type=Time. (I don't have this component there, but try it on a mobile and a native picker should appear. It does at least on my Android devices)

João Rosado