jQuery TimePicker

jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu.

The plugin will automatically convert all time entries to a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like ’02:16 PM’. The following are a few examples of the supported “formats”:

  • 1234 will be converted to 12:34 AM
  • 1234 p will be converted to 12:34 PM
  • 456 will be converted to 04:56 AM
  • 1656 will be converted to 04:56 PM
  • 1:1 P will be converted to 01:10 PM
  • 1:9 A will be converted to 01:09 AM
  • 8:59 will be converted to 08:59 PM
  • 1:20:30 will be converted to 01:20:30 PM
  • 46 will be converted to 05:00 AM (4 hours plus 60 minutes)

There are other supported formats, all inspired by the behavior of a similar timepicker used in Google Calendar.

To learn how to use the plugin and more, visit the official page.

  • jQuery TimePicker with 24 hour time format: http://jsbin.com/odoli4/4

  • Thanks for making things simple.

  • patrick

    Perfect! Just what the doctor ordered 🙂

  • Version 1.0.3 was released http://bit.ly/timepicker-1-0-3.

    Now you can make the items in the time entries menu start at options.startTime instead of using the selected time to rearrange the time entries.

    In this example the first item in the menu is ’12:00 AM’ no matter what time is selected in the input field. http://jsbin.com/onejo3

  • Bob

    Can you give an example of minTime adn maxTime, can’t seem to get the syntax right.

  • Anonymous

    Hello Bob, thanks for posting. minTime and maxTime take Date objects, the plugin use them to get the minHour and minMinutes, and maxHour and maxMinutes values.

    Here is an example: http://jsbin.com/ebife3/2

    Let me know if that helps.

  • Anthony Sitterly

    Can someone provide me an example of setting the starTime option on create?Thanks!

  • Hakamishi

    It is better to make iteration over the array by for (var k = 0, len = patterns.length; k <len; k + +) {… }. Because if we expanded Array.prototype, then we'll get an error during the iteration using the for (k in patterns) {… }
    Also, I'v replaced the lines widget.ui.css ($. extend (i.element.offset (), {     width: i.element.innerWidth (),     zIndex: i.options.zindex? i.options.zindex: i.element.offsetParent (). css ('z-index') })); on widget.ui.css ($. extend (i.element.offset (), {     width: i.element.outerWidth () – (widget.ui.outerWidth () – widget.ui.width ()),     zIndex: i.options.zindex? i.options.zindex: i.element.offsetParent (). css ('z-index') }));

    • Hakamishi

      oops, looks like some problems with javascript code posting

      • Anonymous

        Hello @3131929b0c192c2fa8b6439c3440d040:disqus thank you for taking the time to review the code. I’ll take a look at your ideas later today.

        I’ll check if there is a way to make DISQUS understands code snippets.

      • Anonymous

        I added code HTML tags to your comment to make the code looks a bit better.

    • Anonymous

      Hello Hakamishi, I’ve commited your changes to the GitHub repo. Thanks for sharing.
      https://github.com/wvega/timepicker/commit/f4ac1f69e660d7f2f1d31c8926ad02f549946233

  • Tchitchu

    Hi there I would like to pass the selected time to the next timepicker as the start time.
    if (typeof jQuery != ‘undefined’) {    (function($){        $(‘#timepicker’).timepicker({            timeFormat: ‘HH:mm’,            minHour: null,            minMinutes: null,            minTime: null,            maxHour: 24,            maxMinutes: null,            maxTime: null,            startHour: 0,            startMinutes: 0,            startTime: null,            interval: 15,            // callbacks            change: function(time) {}        });  $(‘#timepicker2’).timepicker({            timeFormat: ‘HH:mm’,            minHour: null,            minMinutes: null,            minTime: null,            maxHour: 24,            maxMinutes: null,            maxTime: null,            startHour: 0,  // previous selected HH            startMinutes: 0, // previous selected mm            startTime: null,            interval: 15,            // callbacks            change: function(time) {}        });    })(jQuery);}

    hope to hear some solutions…thx

    • Anonymous

      Hi Tchitchu,

      Thanks for posting. I have a solution for you, please take a look at: http://jsfiddle.net/wvega/A9cE6/. You would need to use the source code from the latest commit to have access to some of the methods described in the example.

      Let me know if that works for you.

  • dev

    is there  a way to have it specify the end time? For example, I don’t want any time after 6pm. I’ve adjusted the minTime, maxHour, maxTime, etc. and nothing worked. also, there’s no documentation on what those variables are for, and there’s no example of what would go there, other than null. startHour has 7, so I figured maxHour could be a number as well, but it didn’t change the output. thanks.

    • Anonymous

      Hello dev,

      Thanks for posting. You’re right, the plugin needs more documentation. I’ve created several demos to answer the questions left by other users in this blog post, but they are not easy to find. I’m currently working on a page dedicated to the plugin and it will hopefully help new users to understand how to use it.

      I have created another demo which I think does what you need: http://jsfiddle.net/wvega/qSCzu/. The end time can be controled using the maxHour, maxMinutes and maxTime options. The first two should be integers in the range [0,23] and [0,59], respectively. maxTime takes a Date object and extracts the time information (hour, minutes, seconds) from it. In the future maxTime will also accept a string, like the one you can type in the input field.

      Hope this helps.

  • Anonymous

    Very good plugin indeed.. Well done.. I liked it…

    http://jquerybyexample.blogspot.com

  • Puzsol

    don’t forget the dropdown:false option – just what I wanted – some client side parsing of a typed time with no gui overhead – brilliant!

  • Hernan Silva

    Hey Will.

    I was using your plugin and was unable to capture the “change” event from timepickers. I checked your code and it seems it its not triggering the correct event, in line 521 I can see:i.element.trigger(‘time-change’, [time]);

    I changed it to:i.element.trigger(‘change’, [time]);

    and now it triggers accordingly.

    Is it ok or am I spoiling your code?

    Thanks a lot.

    Hernan Silva, Ex Wethink

    PD: Hope you understand my poorly written english.

    • Anonymous

      Hi Hernan,

      Long time no see you :P.

      The plugin captures the change event, parses the time into a Date object and then triggers a time-change event with that Date as argument. However, the plugin shouldn’t prevent the change event from being captured elsewhere, what you describe may be a bug. I’ll take a look.

      Please note that the change event is only triggered when the users interact directly with the input field and the field loses focus (i.e. the user types the time). Selecting an entry from the dropdown may not trigger the event. I’ll also check this to be sure.

      Also, I would like to keep the time-change event and use it to pass an already parsed time. It is also triggered when the time is changed through setTime, for example.

      Finally, I’m worried that using your line, may create an infinite loop, ecause I capture that change event to parse the newly entered or selected date. However, if that change worked for you, then there is no problem. I’ll see if I can do something similar in the plugin.

  • Leo_qifays90

    huhuhuhu

  • Pingback: jQuery TimePicker - Pixel Library()