Time Picker for mobile devices

Question

I am working in HTML5, CSS3 and using jQuery for my project. I need to have a time picker only - no date picker - for mobile devices like iPad, Galaxy etc. It should work with both touchscreen and non-touchscreen devices. I found one with a slider but it failed on mobile devices.

Solution 1

Check out DateBox. I think it does exactly what you need:

Solution 2

I've found another one which looks quite good. It also has different styles for different platforms: mobiscroll

Solution 3

Im glad to tell you that there is no need for a third party plugin in order to get the time-picker functionality.

HTML5 has already a native time picker wich is very easy to implement:

<label for="timePicker1">Set Time:</label>
<input type="time" name="timePicker1" id="timePicker1" value="10:00">

Read and write the value is equally easy with jQuery:

var time = $('#timePicker1').val(); //<- Get value
$('#timePicker1').val("09:30");     //<- Set value

The value for either set/get is an string with format 'hh:mm'.

It works as intended on JQuery Mobile 1.4.2.

There is also another usefull HTML5 controls here: http://www.w3schools.com/html/html5_form_input_types.asp

Regards.

Solution 4

I wrote this jQuery Time Picker based on the existing Datepicker but for time only. Never tried it on a mobile device but I think it will work well.

You can try it at : http://fgelinas.com/code/timepicker

Solution 5

Interesting problem -- I tried out the first Jquery datepicker (includes timepickers) example:

http://plugins.jquery.com/project/cantipi

It works once on my iPhone but then fails to respond to further touch events.

Then I tried the second one: Calendrical

http://tobiascohen.com/demos/calendrical/

I could set the time and reset it on the iPhone. Did you try it?

You might also look at Sencha for the touch events and consider its timer.

View more solutions

Comments

[Mustehsan Ikram]

Thanks for the help. but guys i need a time picker that can display and let user select time upto seconds. Please tell me whether the control u made is customizable as well.

[Mustehsan Ikram]

Guys I need to show minutes and seconds from 0 to 59 to user.

[Francois Gelinas]

Sorry it does not do that. Minutes and seconds level input would be huge or complicated. Maybe you need a customized numpad or something.

[Mustehsan Ikram]

Hi,Yes, you are right. I found one solution pointing to masking of text field to allow only time. stackoverflow.com/questions/2259843/jquery-masked-edit-for-t‌​ime

[Clay]

This is exactly what I was looking for. Thanks!

[djunod]

beautiful, free and for all (major) platforms! Thanks for the pointer!

[fretje]

@dav_i: it is open source, and available on github, so still free. A subscription just gives you premium support and some other features (which are not worth a monthly fee IMO).

[Bikas]

Hi, this plugin is created by me. I'd like to say that this plugin supports Android 2.3+, not just 4.0+. You can see it in action with this play store app - play.google.com/store/apps/details?id=com.bikasv.cordovaPlug‌​in.

[Bikas]

Also to add, iOS is not supported at all by this plugin, not yet at least.

[demersus]

Unfortunately not supported in all major browsers