16

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.

1

7 Answers 7

19

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

timepicker

0
14

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

mobiscroll time picker mobiscroll time picker ios

2
  • beautiful, free and for all (major) platforms! Thanks for the pointer!
    – djunod
    Feb 5, 2013 at 13:35
  • @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).
    – fretje
    May 13, 2013 at 12:05
5

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.

1
  • Unfortunately not supported in all major browsers
    – demersus
    Feb 27, 2017 at 16:56
3

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

4
  • 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. Apr 4, 2011 at 4:12
  • Guys I need to show minutes and seconds from 0 to 59 to user. Apr 4, 2011 at 5:45
  • Sorry it does not do that. Minutes and seconds level input would be huge or complicated. Maybe you need a customized numpad or something. Apr 4, 2011 at 10:28
  • 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-time Apr 5, 2011 at 4:15
1

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.

1

It looks like jQuery mobile updated their date and time picker code recently. Have a look at the demos here (that may only work properly on a mobile device): http://jquerymobile.com/test/docs/forms/textinputs/

0

I was looking for a native timepicker rather than a bespoke one. Found this which works really well on Android 4.0+. I haven't tested yet on iOS.

http://bikasv.com/blog/2013/04/14/cordova-datepicker/

2
  • 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.cordovaPlugin.
    – Bikas
    Aug 22, 2014 at 7:25
  • Also to add, iOS is not supported at all by this plugin, not yet at least.
    – Bikas
    Aug 22, 2014 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.