fgelinas/timepicker

A jQuery UI Time Picker

timepicker's Issues

Set translantion by default

Hi!
I have the next problem: i want to set a default translation with code. The next inputs with timepicker should be translated by default.

How?

_showTimepicker issue in IE8 and lower, breaks when setting zindex

I'm using;
jQuery UI Timepicker 0.2.5
jQuery JavaScript Library v1.4.2

On Line 390 of jquery.ui.timepicker.js it breaks when doing inst.tpDiv.css('zIndex', zIndex); (IE8 only)

I fixed it by adding a try/catch around this line...

I guess I just answered my own issue because I noticed the requirements for timepicker is jQuery 1.51 with a comment of "probably will work with previous versions"...

I hope this help other people

REQ: "disable" and "enable" methods like UI DatePicker

See http://jqueryui.com/demos/datepicker/ under Methods, you can set "disable" and "enable". When disabled, the picker won't show. This is quite a useful feature, same as disabling input on standard input elements.

Alternatively (or also) simply allow programmatic setting of the "showOn" property, so it can be set to null (disables the picker) or "focus" to enable it again.

I know you can set the "disabled" html property on the input element itself to disable the picker, but the browser does unwanted things to the input box visually (greys it out) so it's not the ideal solution. It's nicer to set the input box to "readonly" and control the picker instead.

validation

How about the ability to validate if the data in the input type=text is a valid timepicker time?

Feature request: Non 24 hour time

I just found this plugin the other day and wasn't too sold on it at first. Then I started using it a bunch more and showed it to a few people. They all thought it was one of the better timepickers available.

There were a couple that think 24 hour time is confusing to the masses. I don't know why it's so hard, but they think it is.

Is there any plan for a 12 hour - am/pm option?

parseTime is wrong when showHours or showMinutes are set to false

When the timepicker is set to either show only minutes or show only hours, the parseTime function is returning -1 in both hours and minutes because it doesn't find the timeSeparator.

The result is that when you open the timepicker (although a valid time is set) it has no selected value.

zindex is NaN

It seems that if I don't specify a zindex, it gets set to NaN.

Show Date Picker and Time Picker using one input

I would love to have the ability to use one input and show both the date picker and the time picker and have them save their results to the single input. Right now I have to have two inputs, one for the date and one for the time so it requires more clicks by the user to select a date and time combination.

Good job on the look and feel of the time picker, my users really love it.

Timepicker not closing when in an iFrame and using Firefox, IE9, Opera.

I'm testing your nifty jQuery timepicker in an iframe.
In Firefox, IE9, and Opera (latest), it will not close it when used in iFrame.

In Chrome and Safari it works fine.

I have same code in a page not using iFrame, there it works as it should.

I'm also using jQuery datepicker (the standard one) in the same pages as for the timepicker.
That also has an issue not closing on a date select, when in an iframe.
There I made a fix using:
onSelect: function(selectedDate) {
$('#ui-datepicker-div').hide();
}

I was thinking about using the code below for a workaround with your timepicker:

I was hoping to be able to do something similar in timepicker:
onSelect: function(time, inst) {
// do something here
}

But my problem is that I need to be able to detect the dblclick or second click in the timepicker. So far I have not figured out what kind of code to use in order to know if to close the timepicker or not. onClose is not triggered, so cannot be used (AFAIK). If there was a flag set when the close conditions where met, and I could test that flag, then it should be easy...

So... do you know how I can make timepicker to close properly when used inside an iFrame, with the problem browsers mentioned above? Either by some nifty workaround code inside onSelect, or if you mabe fix this in main code of timepicker. Do not know if this is a bug or if it is browser issues.

Is there a getTime method?

Looking at the code, it appears it was intended but there's no _getTimeTimepicker() function that would be called by the code on line 1004. I added the following method to get it to work:

_getTimeTimepicker : function(input) {
return input ? input.value : '';
}

Timepicker displays behind container when hosted in some non-jQuery UI dialog containers

Behavior happens because the current internal _getZIndex function traverses the parent element tree, but returns when the first non-zero zindex value is found, returning a value which may not be the largest zindex among the parents. One condition where it causes the problem is with certain non-jQuery UI dialog containers that use large fixed zindex values and nested zindex-influenced elements of their own.

Admittedly, this may not be a use case that warrants any attention, but just in case, here is a modified version of the _getZIndex function that resolves this issue:

// This is an enhanced copy of the zIndex function of UI core 1.8.?? For backward compatibility.
// Enhancement returns maximum zindex value discovered while traversing parent elements, 
// rather than the first zindex value found. Ensures the timepicker popup will be in front,
// even in funky scenarios like non-jq dialog containers with large fixed zindex values and
// nested zindex-influenced elements of their own.
_getZIndex: function (target) {
    var elem = $(target);
    var maxValue = 0;
    var position, value;
    while (elem.length && elem[0] !== document) {
        position = elem.css("position");
        if (position === "absolute" || position === "relative" || position === "fixed") {
            value = parseInt(elem.css("zIndex"), 10);
            if (!isNaN(value) && value !== 0) {
                if (value > maxValue) { maxValue = value; }
            }
        }
        elem = elem.parent();
    }

    return maxValue;
},

Option onClose

Hy!

  When a try to call the function "onClose" create before, not function, I try to do the same way the DatePicker, like that:

//DatePicker - This Function
$(this).datepicker('option','onClose', '');

//TimePicker - Its not Function !!
$(this).timepicker('option','onClose', '');

There is a way to do that?

Feature request: add decrease / increase buttons

Hello,

At first, thanks for the great plugin! We have a requirement to be able to increment the input value by small up / down icons on the right side. The incrementation should be possible by certain step - e.g. 5,10,15 min. Like the spinner widget in this showcase http://www.primefaces.org/showcase/ui/spinner.jsf

Would it be possible to add this functionality to your timepicker? We could make this configurable too and add a "step" parameter for the minutes incrementation to the configuration. If user click on the up / down icon, the input value gets decreased / increased by set step. Options look like then

$('#timepicker').timepicker({
// Options
showSpinner: true / false,
incrementMinutesStep: 15
...
});

What do you think? I could maybe fork to the development and add this functionality self.

Feature Request : Add destroy methode

Hi,

I just want to request a little feature to this plugin that is very cool :) I think that the destroy method must be implemented, because every plugin that works with jquery have this feature and is very useful for developpers :)

Thank you

Sincerrely

Can you provide an option to hide minutes panel?

I'd like to set time in integral point, with minutes value always as 0. Can you provide an option? Thanks.

Changing one timepickers options while another timepicker is actively being used.

If I have a timepicker window open and I'm selecting a time, then while it's open, I use an on change event to modify the options of another timepicker, the open timepicker seems to switch over to the one that just had its options changed.

Then, to force it to switch the context back, if I try to just change some uneeded option on the original picker, the picker window closes without letting me click a time after I've clicked an hour.

$('.multiplier-items').on('change', '.timepicker.time-end', function() {
    var hour = $(this).timepicker("getHour");
    var minute = $(this).timepicker("getMinute");

    var $time_start = $(this).closest('.multiplier-time-item').find('.timepicker.time-start');
    $time_start.timepicker("option","maxTime", {hour:hour,minute:minute});
    //$(this).timepicker("option","junk","nothing); //need to put focus back on this time picker in the global instance
});

If I check $.timepicker._curInst it still shows it's the one that's open, but when I click the hours or check the settings, it effects/matches the one changed in the change event, in this case the $time_start timepicker.

Seems I was able to fix it.
Near line 1099 this:

            if (inst) {
                if (this._curInst == inst) {
                    this._hideTimepicker();
                }
                extendRemove(inst.settings, settings);
                this._updateTimepicker(inst);
            }

needs to be changed to this:

            if (inst) {
                extendRemove(inst.settings, settings);
                if (this._curInst == inst) {
                    this._hideTimepicker();
                    this._updateTimepicker(inst);
                }
            }

Since all the inst share the same dialog, when it does the updateTimepicker, even though inst isn't curInst, it rebuilts the html with what's to be expected from inst and redoes the bindings, so if curInst != inst, it shouldn't update the timepicker.

Restrict time range

Hello François.

You've made a great job programming this widget. However, it would be nice to have the option to restrict the time range so that the user doesn't select an anterior date.

Thanks

onHourShow and onMinuteShow

Hello,
First, thank you for very good plugin.
I would like to start the event "onHourShow" and "onMinuteShow" from a function.
Is it possible, for example?

function click_button_test(){
currentHour = currentHour + 2;
$('#timepicker').timepicker({
onHourShow: OnHourShowCallback,
onMinuteShow: OnMinuteShowCallback
});

}

In a $(document).ready{}
The functions "OnHourShowCallback" and "OnMinuteShowCallback" works.
But can not use them again to update the timepicker.

Sorry for my english I'm french.
Thank you for your help.

Performance issue with large number of timepickers

Hello,

I had a few performance issues with a single page using a large number of timepickers. My page have 196 input boxes on which I used the timepicker on page load and it took around 6 seconds to perform on Google Chrome 25.0.1364.160.

I transform my use of the timepicker on page load to be on the first focus on each cell to get around this issue. I believe you could use the same strategy behind the scene if you have the same problem or internally in a potential future version of the timepicker.

Before:

// On page load
$(function() {
    $('.timecell').timepicker();
});

After:

// On page load
$(function() {
    // On first timecell focus
    $(document).on('focus', '.timecell:not(.hasTimepicker)', function(evt) {
        $(evt.currentTarget).timepicker();
    });
});

Selecting invalid minute

Hey there, im currently trying to implement your timepicker into a project im working on to make it more sweet.

My issue is when i define a limited time, for example 9.30 - 20.00 it is not working correctly, if I select the hour 9 it outputs 9.00 and not the first selectable time that would be 9.30 - im currently working with an interval of 15 minutes.

My code is looking like this:

            if ((hour > 20) || (hour < 6)) {
                return false; // not valid
            }
            return true; // valid
        }
        function OnMinuteShowCallback(hour, minute) {
            if ((hour == 20) && (minute > 00)) { return false; } // not valid
            if ((hour == 6) && (minute < 30)) { return false; }   // not valid
            return true;  // valid
        }
        $('#timepicker').timepicker({
            showPeriod: false,
            defaultTime: '',
            showPeriodLabels: false,
            hourText: 'Time',             // Define the locale text for "Hours"
            minuteText: 'Min',
            minutes: {
                starts: 0,                  // first displayed minute
                ends: 45,                   // last displayed minute
                interval: 15                 // interval of displayed minutes
            },
            onHourShow: OnHourShowCallback,
            onMinuteShow: OnMinuteShowCallback,
        });

Feature request: beforeShow event

I'm loving this picker, thank you for all your hard work.

One addition would be really useful. A beforeShow event, like what exists for the standard DatePicker, which fires once before the tool is displayed. This would be useful for setting variables, like remembering the current time to check if it was changed, etc. Simple to implement and very very handy.

Many thanks!

[EDIT] Cancel that. I just looked in the code to implement it myself, and found it was already there. It's just not documented. :) Can't see how to delete this issue, but feel free to do so.

uuid created 2x

is there a reason for this?

top of file:

var tpuuid = new Date().getTime();

bottom of file:

$.timepicker.uuid = new Date().getTime();

selectHours doesn't use the configured instance of timepicker

There is a line in selectHours which is causing me a lot of grief....

$target = $(id)

The primary issue is that is supposed to be a pointer to the instance of the timepicker that is configured on a jquery element. In other words, I do something like this:

<div id="id1">
<input id="startDate" />
</div>

<div id="id2">
<input id="startDate" />
</div>

$('#startDate', '#id1').timepicker()
$('#startDate', '#id2').timepicker()

Instead of timepicker internalizing which element has been configured as a timepicker, it just internalizes the selector. It then uses the $target = $(id) line in selectHours() to find the right element. Not only is this inefficient, but it also prevents my code above from working.

I'm not even sure how to fix this as I'm guessing the problem is rampant in the codebase... I see it in selectMinutes() and a few other methods.

Set focus on next form input after selecting hour and minute

Hi,

if I try to set the focus on the next form input after selecting of hour and minute, I get a "Maximum call stack size exceeded" error: http://javascriptrules.com/2009/06/30/limitation-on-call-stacks/

I use the onCloseCallback:

$('.timepicker').timepicker({
  onClose:function (time, inst) {
    // find next element
    var next_element_id = find_next_element_id(inst);
    $('#'+next_element_id).focus();      
});

It works with the jQuery UI Datepicker.
Why doesn't it work with the Timepicker Plugin?

It also works, if I set the focus on the current input element:

$('.timepicker').timepicker({
  onClose:function (time, inst) {
  $("#"+inst.id).focus();  
});

Any ideas?

Add minutes interval

Add an option to set the interval of what minutes are shown - what I mean is, for example I don't want to show the user to choose between each 5 minutes (i.e. :00, :05, etc) but show him only the following options - :00, :15, :30 and :45. I implemented it locally very easily - added a new property:

defaultMinutesRange: 5,

in the defaults list and edited the _generateHTMLMinutes method so that it doesn't use the hardcoded 5 minutes interval, but use the property we set eariler:

var minutesRange = this._get(inst, 'defaultMinutesRange');
//code
//code
for (m = 0; m < 15; m += minutesRange) {
html += this._generateHTMLMinuteCell(inst, m, (m < 10) && showMinutesLeadingZero ? "0" + m.toString() : m.toString());
}

Of course, I don't want to say that this is the best possible solution (I hadn't even tested it thoroughly), after all I got your code less than an hour ago. The code above is intended mostly for other developers who need that feature before it is implemented by you :)

Feature Request: Enabling and Disabling also handles button

Can you please disable the button when the widget is disabled for future releases. I did something simple like this.

$(button).bind("click.timepicker", function () {
if ($.timepicker._timepickerShowing &amp;&amp; $.timepicker._lastInput == input[0]) { $.timepicker._hideTimepicker(); }
else {$.timepicker._showTimepicker(input[0]); }
return false;
});

to

$(button).bind("click.timepicker", function () {
if ($.timepicker._timepickerShowing &amp;&amp; $.timepicker._lastInput == input[0]) { $.timepicker._hideTimepicker(); }
else if (!inst.input.is(':disabled')) {$.timepicker._showTimepicker(input[0]); }
return false;
});

and in the _enableTimepicker function i added $(inst.settings.button).fadeTo(500, 1);
and matching in the _disableTimepicker function $(inst.settings.button).fadeTo(500, 0.4);

Thanks

Extra content in minutes when selecting hours

When it set

defaultTime: ''

after selecting hours, extra-content appears instaed of default minutes: "0-1". Occures on main site in part "Timepicker with the Now, Deselect and Close buttons" after deselecting time input.

custom and default formatter?

Thanks for writing this, very nice. Unfortunately it suffers the same design defects as jQuery UI/datepicker which is that it tries to do everything with configuration options and as a result is bloated and inflexible. I'd much rather see something more loosely coupled and much slimmer, with sensible overrides. For example, say we want to pass in a custom time formatter, so that whole hours are formatted e.g. as "8pm" and minutes shown only if non-zero. We already have such a formatter--how could we get timepicker to use it? And thus could also remove all of those configuration options, saving weight.

Timepicker buttons not binding to the correct timepicker on page

Hey there,

While using this plugin today I found a problem where if I had more than one timepicker on the page which used a button to open, it would not take into account all the timepickers. It would just bind it to the last one.

The problem line seems to be here (#280):
$(button).bind("click.timepicker", function () {

I have gone ahead and quickly changed it to suit my application. As in, all my timepickers are contained in their own parent div element. It will use the input variable to bind the event, rather than inserting it straight into a jQuery selector object:
input.parent().find(button).bind("click.timepicker", function () {

This is not the best solution and won't work for everyone, but I thought it would be helpful pointing out the issue.

Cheers, thanks for the plugin!

Packagist

Would you mind putting this project on Packagist?
We'd love to use Composer to manage our use of this project a bit better (like we do with some others), to be sure which version we're using/have modified, etc.

All that's required is that a composer.json file is added at the root of the project containing a summary of the project, versions are tagged (git tag -a 2.1.0 -m "tagging 2.1.0") and that the GitHub service hook is set up.
See the Packagist about page) for more detail on each step.

Minute buttons don't highlight

I've found that when the onMinuteShow event is used, the minute buttons stop highlighting on mouseover, after an hour is selected. The minute buttons are not disabled, they can be selected and work normally otherwise. They also highlight when the tool is first displayed, but after an hour is clicked, they stop highlighting.

Example implementation:

    $("input:text[name=appttime]").timepicker({
      showAnim: null,
      defaultTime: "",
      showLeadingZero: false,
      showPeriod: true,
      hours: {
        starts: 6,
        ends: 20
      },
      minutes: {
        starts: 0,
        ends: 45,
        interval: 15
      },
      rows: 2,
      onMinuteShow: function() { return true; }
    });

When this is shown, minute buttons work normally. But when an hour is clicked, minute buttons stop reacting to mouseover. They can however still be clicked and the minute will be selected ok.

If I remove the onMinuteShow event line, the problem goes away.

too many </tr> tags (fails with xhtml)

remove the tr closure from jquery.ui.timepicker.js line 600

a mess of version numbers.

top of file: * jQuery UI Timepicker 0.2.7

website download page: Current version : 0.2.7 - released October 19, 2011

maybe you should just cut down to one location instead of 5+?

Allow only digits as input

Only this pattern make sense for input values:

dd:dd

where d is a digit - 0,...9. Can we restrict input to this pattern by using of jquery-keyfilter: http://akzhan.github.com/jquery-keyfilter/ ?

sync'ing with a jquery datepicker

The whole chunk of code to sync two timepickers is rather convoluted and difficult to have to expose to the end users of this library.

In addition, I would suspect that a common use case is the need to sync two datepickers with the two timepickers (begin date/time, end date/time).

Maybe there can be some sort of helper created that can make this a lot easier? Any thoughts on the matter?

onClose function on first time pases the hours variable as string

if I define the function like this onClose : function(time, obj) then the first time it is invoked the obj.hours is containing a String of selected hour, bet next time it is a integer. For now I am using parseInt(obj.hours).

uncaught exception: Missing instance data for this timepicker

Hi after iuntegrate the script I got this erro message:

Error: uncaught exception: Missing instance data for this timepicker

and the css of my site crash.

Any solutions for this issue?

Many thanks
DJ

new custom hours feature

Why does the following produces an error?

hours: {
starts: 6, // first displayed hour
ends: 23 // last displayed hour
},

position by button instead of input

I'm using your timepicker with hidden input box. Timepicker is displayed by a button. I need it to show by the button as well. How about adding a showByButton option:

// position with the ui position utility, if loaded
if ((!inst.inline) && (typeof $.ui.position == 'object')) {
    // show by button or input
    var of = !!inst.settings.showByButton ? $(inst.settings.button) : inst.input;   /

    inst.tpDiv.position({
        of: of,
        my: $.timepicker._get(inst, 'myPosition'),
        at: $.timepicker._get(inst, 'atPosition'),
        // offset: $( "#offset" ).val(),
        // using: using,
        collision: 'flip'
    });
    var offset = inst.tpDiv.offset();
    $.timepicker._pos = [offset.top, offset.left];
}

Change is around like number 360 in jquery-ui-timepicker.js

Timepickers united :)

Hey. Great work on Timepicker. I have a question: what do I have to do that these two plugins would work together on the same page ( yours and http://trentrichardson.com/examples/timepicker/). I need both :)

Regards.

.timepicker('option', 'xxx') seems to be broken

EDIT: my bad, disregard. I was using it like so:
.timepicker('option','getTime') but since that's not an actual option, it returned "undefined"

Near line 1405 you have:

        if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string')
            return $.timepicker['_' + options + 'Timepicker'].
                apply($.timepicker, [this[0]].concat(otherArgs));

This returns undefined since:

    $.timepicker['_' + options + 'Timepicker']

always evals to $.timepicker['_optionTimepicker']
so should probably be:

    $.timepicker['_' + arguments[1] + 'Timepicker']

EDIT:
Seems I'm wrong, after playing with it for a while and have figured it out. Unfortunately I wasn't able to find the documentation for that.

Error setting a 10 minute interval

Hi,

whenever I try to set a 10 minute interval, I get the following error message in the Firefox Error Console and the timepicker won't start:
m is undefined
It points to Line 550 as the source.

I experience the the error for other intervals too.
The code I'm trying to execute:
$('#timepicker').timepicker({
minutes: { interval: 10 },
});

I'm using Firefox 5.
Did I do something wrong or is this a bug in your timepicker?

regards,
Haynes

Feature Request: Custom parsing and formatting functions

Hello,

It would be nice to be able to define custom parsing and formatting functions for the time picker. This would help me with my use case where the user may input his time using different formats which are all accepted by the application but are not by the time picker since the time picker may only potentially accept one.

Regards,

Out-of-band minutes

Would like to be able to add out-of-band minutes that aren't generated by the start/end/interval loop. A specific use case is wanting to add "01" and "59" minutes in a 15 minute interval. Here's the custom code I'm using:

In _GenerateHTMLMinutes, after the for(m=...) loop, around line 770:

// If minutes_options has the "additional' array, loop through it. If the minutes array
// doesn't already have this time, add it. Finally, sort the array.
if (minutes_options.additional)
{
for (var i = 0; i < minutes_options.additional.length; i++)
{
if (minutes.indexOf(minutes_options.additional[i]) < 0)
{
minutes.push(minutes_options.additional[i]);
}
}
}

        minutes.sort();

Then, in the timepicker declaration:
$(".time").timepicker({
minutes: {starts: 0, ends: 59, interval: 15, additional: [59]}
});

Results in:
[00] [15]
[30] [45]
[59]

Handling of invalid input is missing

Hello,

I miss a handling for invalid input. Assume, we have set minutes interval to 15 min. I'm not sure how an invalid input should be handled in this case if user input something manually and left the field then (onblur event). I would say, the old (prev. input value) should stay then. Assume I had 02:45 and input 02:53. Then

02:53 -> 02:45

But what is if we want to round up / down the last input value (real business case in my web application). So that

02:53 -> 03:00

May be we can configure this behavior by options. I propose two new options:

round = true / false (default is false)
roundMinutesStep = 15

Can your add this feature to the timepicker please? Thanks a lot in advance!

defaultTime should take a Date() object

It'd be great if I could just pass in a Date() object instead of a HH:mm

Provide 'remove' option

$('#timepicker-input').timepicker('remove') would be nice.

I was troubleshooting an issue where we having where we add inputs to the DOM, initialize the timepicker on them, then remove them from the DOM, then add some other inputs to the DOM, initialize the timpicker on them... then the timepicker would show but a click on a date wouldn't do anything.

That isn't the reason for this issue. I decided to completely remove the timepicker when the inputs are removed from the DOM*, and the best way I found to achieve this was the following:

//remove timepicker div
$($.timepicker._tpDiv).remove();

//unbind all related events
$($elem).find('.has-timepicker').unbind('.timepicker');

/*
$.fn.timepicker is subscribed to the mousedown event for the whole document (default event; no namespace)
so we can't undo that but when that event is triggered they first check if there's an instance of the
timepicker ($.timepicker._curInst)
*/

//reset timepicker settings; tell it there's no timepicker instance
$.timepicker._curInst = false;

It would've been much nicer if I could've just had $($elem).find('.has-timepicker').timepicker('remove') or (because the former is per field) $.timepicker.remove() to completely remove the timepicker instance and event handling.

* - well, when the modal they're in is hidden actually (the hidden modal will never be used again, it will most likely be replaced by another modal containing other inputs)

12-hr time in popup stored as 24-hr time in field?

I'd like to let my users select a time in 12-hr format in the Timepicker popup, but then I want the time to be stored in 24-hr format in the field itself so that the time fields can be sorted easily.

Is this currently possible, or if not, can I make it a feature request?

Feature Request: Optional Midnight/Noon tooltip

I know it seems silly but there are some people that just DO NOT understand the 12 AM/PM Midnight/Noon concept. It'd be great if we could provide a tooltip when hovering over 12AM and 12PM that says "Midnight" and "Noon". I know this would most likely be very easy to implement, I'm just throwing the idea out there.

element id / jQuery selector with square brackets

The timepicker timepicker does not initialize correctly when using square brackets in the element id (jQuery selector). The datepicker does work when using these square brackets.

both the curInst property and the id property stay null after timepicker initialized