JQuery Timepicker Plugin

12th April 2009

I had the need to create a time selecting component for a form, but I didn't want to have lots of extra components. After a little bit of searching about I found the following JQuery UI plugin called timepicker.

This plugin will take a input box as the argument and will add three selection boxes for hours, minutes and seconds. It will then hide the original input box.

However, there were two things that I needed that this plugin didn't do. The first is that it was in a 12 hour format and the second is that the plugin didn't have a second selection. So I decided to adapt that plugin in order to incorporate these things.

Here is the modified plugin.

  1. (function($){
  2. jQuery.fn.timepicker = function(){
  3. this.each(function(){
  4. // get the ID and value of the current element
  5. var i = this.id;
  6. var v = $(this).val();
  7.  
  8. // the options we need to generate
  9. var hrs = new Array('00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23');
  10. var mins = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
  11. var secs = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
  12.  
  13. // default to the current time
  14. var d = new Date;
  15. var h = d.getHours();
  16. var m = d.getMinutes();
  17. var s = d.getSeconds();
  18.  
  19. // override with current values if applicable
  20. // round the minutes and seconds to nearest 10
  21. if(v.length == 8){
  22. h = parseInt(v.substr(0,2));
  23. x = parseInt(v.substr(3,2));
  24. m = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
  25. x = parseInt(v.substr(6,2));
  26. s = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
  27. }
  28.  
  29. // build the new DOM objects
  30. var output = '';
  31.  
  32. output += '';
  33. for(hr in hrs){
  34. output += '' + hrs[hr] + '';
  35. }
  36. output += '';
  37.  
  38. output += '';
  39. for(mn in mins){
  40. output += '' + mins[mn] + '';
  41. }
  42. output += '';
  43.  
  44. output += '';
  45. for(ss in secs){
  46. output += '' + secs[ss] + '';
  47. }
  48. output += '';
  49.  
  50. // hide original input and append new replacement inputs
  51. $(this).css('display','none');
  52. $(this).after(output);
  53. });
  54.  
  55. $('select.timepicker').change(function(){
  56. var i = this.id.substr(2);
  57. var h = $('#h_' + i).val();
  58. var m = $('#m_' + i).val();
  59. var s = $('#s_' + i).val();
  60. var v = h + ':' + m + ':' + s;
  61. $('#' + i).val(v);
  62. });
  63.  
  64. return this;
  65. };
  66. })(jQuery);

You can view and download this code here.

The plugin will also update itself with the time that is present in the text field, as long as it matches the format HH:MM:SS.

I have also setup a test page for this JQuery timeplugin.

You can run the plugin by using the following code:

$('#timepicker').timepicker();

Comments

Permalink
First i wanna thankyou for your work. i have tried to implement it in my site but i dont know why it doesnt work i will send u the file that i have done : ***** /* i have downloaded the js files and saved them in my directory thanks

wicem (Thu, 08/19/2010 - 17:47)

Permalink

been looking for a simple solution for this for a site I'm working on, and lo I find it on your site through a random search. what are the chances.

Mat Sadler (Fri, 04/20/2012 - 16:49)

Permalink

Glad I could help out! This post/plugin is quite out of date though, so it might need some refactoring/rewriting :)

philipnorton42 (Fri, 04/20/2012 - 16:50)

Add new comment

The content of this field is kept private and will not be shown publicly.