JQuery Timepicker Plugin

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.

(function($){
    jQuery.fn.timepicker = function(){
        this.each(function(){
            // get the ID and value of the current element
            var i = this.id;
            var v = $(this).val();
 
            // the options we need to generate
            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');
            var mins = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
            var secs = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
 
            // default to the current time
            var d = new Date;
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            
            // override with current values if applicable
            // round the minutes and seconds to nearest 10
            if(v.length == 8){
                h = parseInt(v.substr(0,2));
                x = parseInt(v.substr(3,2));
                m = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
                x = parseInt(v.substr(6,2));
                s = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;                
            }
    
            // build the new DOM objects
            var output = '';
            
            output += '<select id="h_' + i + '" class="h timepicker">';                
            for(hr in hrs){
                output += '<option value="' + hrs[hr] + '"';
                if(parseInt(hrs[hr]) == h) output += ' selected';
                output += '>' + hrs[hr] + '</option>';
            }
            output += '</select>';
    
            output += '<select id="m_' + i + '" class="m timepicker">';                
            for(mn in mins){
                output += '<option value="' + mins[mn] + '"';
                if(parseInt(mins[mn]) == m) output += ' selected';
                output += '>' + mins[mn] + '</option>';
            }
            output += '</select>';                
    
            output += '<select id="s_' + i + '" class="p timepicker">';                
            for(ss in secs){
                output += '<option value="' + secs[ss] + '"';
                if(secs[ss] == s) output += ' selected';
                output += '>' + secs[ss] + '</option>';
            }
            output += '</select>';                
    
            // hide original input and append new replacement inputs
            $(this).css('display','none');
            $(this).after(output);
        });
        
        $('select.timepicker').change(function(){
            var i = this.id.substr(2);
            var h = $('#h_' + i).val();
            var m = $('#m_' + i).val();
            var s = $('#s_' + i).val();
            var v = h + ':' + m + ':' + s;
            $('#' + i).val(v);
        });
        
        return this;
    };
})(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: