This Blog is about all kind of technical stuff from www.powerhour.at

jQuery Timebox Plugin

jQuery Timebox Plugin

By on May 27, 2010 in jQuery | 4 comments

As we figured out that there currently has been no plugin to handle time values in a textbox, I decided to write one myself called “jQuery timebox”.
This plugin is already in use on our website www.powerhour.at and has to be used the following way:

<form method="post">
   <label for="myTimebox">Time:</label>
<input id="myTimebox" class="timebox" type="text" />
</form>
//Implement Plugin for all textboxes with the class 'timebox'
$('input.timebox').timebox();

Examples

Some examples how the preceeding code would handle several input values:
  • 0800 ==> 08:00
  • 16 ==> 16:00
  • 2 ==> 2:00
  • 152 ==> 1:52
  • 2588 ==> 00:00
  • asdf ==> 00:00

Demonstration

Try out the example below by entering one of the values above (e.g. 1600) and leaving the textbox

Download

    4 Comments

  1. What about inputs like “8p”? Shouldn’t that translate to 20:00, instead of 8:00?

    Chad

    May 31, 2010

  2. Hi Chad,
    didn’t think about that yet, but sounds like a good idea. We’ll implement that as soon as possible.

    thomas

    May 31, 2010

  3. Wow, thanks a lot for this plugin. It was just what I needed. Nice work! :)

    Vanessa

    February 21, 2011

  4. When using the plugin like:

    $(‘#from, #to’).timebox();
    On submit, the to field, was set = from.

    Exampe:

    From: 08:00
    To: 12:00

    Submit.
    Before submit, the code would make:
    From: 08:00
    To: 08:00

    So i updated the plugin, to fit into this:

    (function($){
    $.fn.extend({
    timebox: function() {
    return this.each(function(){
    var $this = $(this);
    //If maximum length of textbox is not equal to 5
    if($(this).attr(‘maxlength’) != ’5′)
    $(this).attr(‘maxlength’, ’5′); //change maxlength to 5
    …..
    function resetTimeBox(textbox){
    textbox.val(’00:00′);
    }
    });
    }
    });
    })(jQuery);

    No changes made. :o )

    Jakob

    March 21, 2012

Post a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>