JQuery Timepicker Plugin

12th April 2009 - 4 minutes read time

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 += '<select id="h_' + i + '" class="h timepicker">';
  33. for(hr in hrs){
  34. output += '<option value="' + hrs[hr] + '"';
  35. if(parseInt(hrs[hr]) == h) output += ' selected';
  36. output += '>' + hrs[hr] + '</option>';
  37. }
  38. output += '</select>';
  39.  
  40. output += '<select id="m_' + i + '" class="m timepicker">';
  41. for(mn in mins){
  42. output += '<option value="' + mins[mn] + '"';
  43. if(parseInt(mins[mn]) == m) output += ' selected';
  44. output += '>' + mins[mn] + '</option>';
  45. }
  46. output += '</select>';
  47.  
  48. output += '<select id="s_' + i + '" class="p timepicker">';
  49. for(ss in secs){
  50. output += '<option value="' + secs[ss] + '"';
  51. if(secs[ss] == s) output += ' selected';
  52. output += '>' + secs[ss] + '</option>';
  53. }
  54. output += '</select>';
  55.  
  56. // hide original input and append new replacement inputs
  57. $(this).css('display','none');
  58. $(this).after(output);
  59. });
  60.  
  61. $('select.timepicker').change(function(){
  62. var i = this.id.substr(2);
  63. var h = $('#h_' + i).val();
  64. var m = $('#m_' + i).val();
  65. var s = $('#s_' + i).val();
  66. var v = h + ':' + m + ':' + s;
  67. $('#' + i).val(v);
  68. });
  69.  
  70. return this;
  71. };
  72. })(jQuery);

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.

You can run the plugin by using the following code:

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

Add new comment

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