When opening the drop down with a value already in the field, the value in the field is not highlighted in the drop down.

from @Pullal0215:

Also there is one more thing that you should know is when I scroll down the timepicker with mouse the control seems to disappear.

Let me know if there is a workaround.

I don't think i would use the corner css from widget for a drop down. It makes picker look inconsistent from other drop downs on the form

Can the timepicker be modified so that it properly sorts the time options for a field with an existing value. Example my timepicker field has a preset value of 2:00pm. When I click in the field I cannot scroll up to select times earlier then 2:00pm. Those earlier times are displayed at the bottom of the list which is confusing for users.

current functionality:

preferred functionality:

One can enter 12:77 and it won't get corrected.

Perhaps we can use something like Facebook's thicker with a scroll indicator that appears when the users uses the keyboard or mouse wheel..

That option is not mentioned in the documentation, and can be useful in special cases, as noted in #31.

@wvega I have a div tag with attribute set display:none for showing it as a modal dialog window.
if I add the timepicker control to this div it displays it in the background.

As a workaround I have added z-index:1151 !important; to the below css element which worked for me.

.ui-timepicker-standard {
37 /* overwrites .ui-widget /
38 font-family: Verdana,Arial,sans-serif;
39 font-size: 1.1em;
40 / overwrites .ui-widget-content /
41 background-color: #FFF;
42 border: 1px solid #AAA;
43 color: #222;
44 / overwrites .ui-menu */
45 margin: 0;
46 padding: 2px;
47 z-index:1151 !important;
47 }

According to this comment: http://wvega.com/225/jquery-timepicker/#comment-402071596, the change event is not being properly triggered. Plase check.

I have tweaked the code to work with jquery 1.3.

Basically, the only 1.4 functionality you are using is delegate().

I'm not very familiar with github, but I can provide the code if needed.

The change needed is moving the mousenter,mouseleave, and click delegate() bindings into the _popuplate method and use bind() instead. First, I tried to make the 1.3 version of live() work, but the problems is that live() is in the document context in 1.3, so the events were being triggered for every timepicker on the page.

Steps to reproduce:

• Attach a timepicker to an input and activate it with scrollbars.
• Scroll without selecting any value
• click outside the timepicker.

Expected behaviour:

• The timepicker will disappear.

Actual behaviour:

• The timepicker persists and cannot be closed without selecting a value.

Affected browsers:

IE10

When applying value binding, has below:
on thise fiddle example: http://jsfiddle.net/W75rx/38/, the value won't apply display format option set in options when we select a different time. If we "re"select the time previously selected, the display format option is then applied.
Please advice on how to fix this issue,
Thank you!

Use php.js' version_compare function to compare agains jQuery versions in (at least) the following locations:

• https://github.com/wvega/timepicker/blob/master/jquery.timepicker.js#L49
• https://github.com/wvega/timepicker/blob/master/jquery.timepicker.js#L361

This will fix the problem where jQuery 1.10.1 is considered to be older than jQuery 1.4.2, for example.

A possible solution could be to replace .ui-timepicker-standard .ui-menu-item with .ui-timepicker-standard .ui-menu .ui-menu-item in plugin stylesheet. Although I believe the calculation of the menu-item width can be improved to look better with this version of jQuery UI.

Use test/visual.html to reproduce.

Ran into a problem with the update of the time. For some reason it doesn't trigger the input change event when a new value is selected. They added this...

setTime: function (time) {
    var self = this;
    if (time && time.getMinutes) {
        self.element.val($.fn.timepicker.formatTime(self.options.timeFormat, time));
        self.element.trigger("change"); // proposed solution
        self.selectedTime = time;

        if (self.options.change && $.isFunction(self.options.change)) {
            self.options.change(time);
        }
    }
}

Tested on jsfiddle with jQuery Timepicker 1.2.2 from http://wvega.github.io/timepicker/resources/jquery-timepicker/jquery.timepicker-1.2.2.js

In some cases where the viewport space is limited, it may be useful to show the timepicker on top of its target element.

Here is a rough example of some code that would accomplish this:

~line 435:

if(widget.container.offset().top > ($(window).scrollTop() + $(window).height() - widget.container.height())) {
    widget.container.css('top', parseInt(widget.container.css('top'), 10) -  widget.container.height());
} else {
    widget.container.css('top', parseInt(widget.container.css('top'), 10) + i.element.outerHeight());
}

The text field remains empty (or with previous value). The plugin behaves as expected if the selection is made using the keyboard.

Seen in IE 7.0.6001.18000 (Windows Vista), IE8 (reported)
Unable to reproduce in IE 7.0.5730.13 (Windows XP), IE 9 Beta (Windows 7), Firefox, Chrome and Safari.

Uncaught TypeError: Cannot read property 'msie' of undefined

Hi. I have a problem with timepicker. After first click timepicker shifted to the left by -9px.
I recorded a video http://youtu.be/OG2np1fdnfg
This problem occurs only when you first click after the page loads

Update. If page has vertical scrollbar, all is well

It would be useful to allow users/developers to change options values after the plugin has been initialized.

One suggestion, based on a question posted by @kdixit, is to call timepicker again passing an object with the options to change and their new values:

$('.timepicker').timepicker({ timeFormat: 'hh:mm:ss p' });

I like that. Is there another, better, way?

Create the UI for the timepicker on demand (the firts time the plugin function is called?) and place it dynamically everytime the menu needs to be shown. Use the same UI for all timepickers.

I am trying to change the output format of timepicker after it is loaded. i use following..

$('.timepicker').timepicker({ timeFormat: 'hh:mm:ss p' });

which does not seem to be working..

Is there anything i am missing ?

Currently, the timepicker menu it is not displaying for us without changing the z-index attribute.

Capture the z-index of input field the timepicker is attached to and give the timepicker menu the same value.

This will allow users to show a value with one format to the visitors and to receive the same value in a more machine friendly format in the server.

Have you posted your plugin on the jQuery site? I didn't see it, and I think others would like what you've done.

Minor issue:

$('.time-field').timepicker().find('...') # this works
$('.time-field').timepicker().timepicker('destroy').find('...') # this doesn't

API methods like 'destroy' seem to return the jQuery object twice, like [$('.time-field'), $('.time-field')].

This is happening on jQuery UI 1.8.20 with jQuery 1.7.2.

I tried digging into the source, but I wasn't able to fix up the return values. I'm not sure why the duplication is happening.

Is this a problem with my app/environment, or can you reproduce it?

This error appear when I use master.zip

This error is on line 57 on jquery.timepicker.js

Sorry for my English!

Hi Wvega.

Thank you for your script. It's very useful.
Can i suggest you to add a "now" option, which takes the server hour by default ?
By format for reading, I mean that you read for example "14h00" on the screen, and the time is recorded to "14:00:00"...
Thank you again.

I am working on a functionality same as outlook appointment where on change of start time the end time should change.
On the change event of start time i have written the code to set the next time in the endtime control but the next method does seems to work.
below is the code.

jQuery(function ($) {
   $('#starttime').timepicker({
       scrollbar: true,
       change: function (time) {
           var timepicker = $('#endtime').timepicker(),
               instance = timepicker,
               object = null;
           instance.setTime(time);
           instance.next();
       }
   });
});

jQuery(function ($) {
   $('#endtime').timepicker({
       scrollbar: true,
       change: function (time) {

       }
   });
});

Please help me out.

Dan Hulme thinks some people don't want to use the dropdown but they can use the time parser. I think he is right.

Reported in #51.

Time picker window does not close on blur. Looks like there is a handler bound to blur.timepicker event but the i.close() call is commented out.

it's impossible to find #bootstrap 3 compatible #timepicker that installs via #bower with no problems. and has working 24h time.
https://twitter.com/bazinder/status/428101458673016832

The interval shouldn't be below 60 when the timeFormat does not have minutes in it.

My patch simply checks if the timeFormat has 'mm' somewhere in it, and if not, sets the interval to 60. Could be further refined by checking if the interval is multiple of 60, then it can stay as it is, but if not then we can set it to the nearest multiple of 60.

Without this if the format has no 'mm' in it and the interval lets say is 15, then the list will contain each hour 4 times.

diff --git a/jquery.timepicker.js b/jquery.timepicker.js
old mode 100644
new mode 100755
index e969a01..68b7125
--- a/jquery.timepicker.js
+++ b/jquery.timepicker.js
@@ -627,6 +627,11 @@ if(typeof jQuery != 'undefined') {
             }

             var globals = $.extend({}, $.TimePicker.defaults, options);
+
+            // the interval should not be smaller than 60 if the timeFormat
+            // does not include minutes
+            if (!/mm/.test(globals.timeFormat))
+              globals.interval = 60;

             return this.each(function() {
                 $.TimePicker.instance().register(this, globals);

incorrect time like (6666) is allowed
any time greater than 6666 is allowed

"parseTime()" throws "Maximum call stack size exceeded" if a user enters such value into the textbox "441234567".

If user enters repeating digits in the beginning, and the number of the entire digit is greater than 6, lose focus or tab over, then this error will be thrown.

Also, when interval is 45, to say something, the generated time items are not equally seperated:

• 07:00 PM
• 07:45 PM (good, 45 minutes later)
• 08:00 PM (wrong, 15 minutes later!)

from https://twitter.com/gamesover

How about if dropdown==disabled & input==parsed value, perform default form submit.
...
Form could be submitted by pressing enter 2x. Once to parse, again to submit (because it's value equals parsed value). Add as option.

As needed in #51.

@wvega if i am binding the timepicker to an input control on a div with style="display:none" and try to move the window the timepicker remains static and does not move along with the bound control.

Looks like each call to timepicker still creates a new instance of the timepicker widget.

Not sure if this is a bug or not, but I'm having some z-index issues with the timepicker on a more complicated layout. I have a timepicker that isn't showing inside jquery UI tabs.

The z-index value is coming through in chrome as 'auto' by default.

I've found changing line 584 (default for zindex value) from 'null' to 1 fixes my particular issue.

Any idea why this is happening? Would changing that value have an effect anywhere else?

THANK YOU by the way for the fantastic plugin!

Cheers

Some of our users reported this issue and I found out that they are holding the mouse button down too long after clicking on a time entry. If you hold the mouse button down for about a second or more then the field will not populate. A quick click of the time populates the field.