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

[phazei]

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.

[phazei]

Got it working. Feel free to backport this if you want:
https://github.com/phazei/timepicker/commits/master
Added support for min/max time using what you already had for those onHour/MinuteShow callbacks

[fgelinas]

Hi,
Thanks for taking time to examine the code and provide solutions, I will verify that but it looks good.
Also, for a start - end time usage, I have been thinking about a way to bind two timepicker together so the programmers do not have to use events and change properties to make it work.

Anyway I'll check your code and probably will inetgrate it into the main branch.

Thanks !

[phazei]

The issue with binding them together automatically is the need to give them each a unique id. That would work fine if there are only 2 timepickers on the page.

In my particular use case, there are many entries for start/end times that are dynamically added to the page. I put each one in a container so I could go up to the parent and find the related start/end box. Not sure how that could be done without having to write the code for it.

I do have one page where there's just a single box, and there wasn't much code to write.

$('#time-start').change(function() {
    $('#time-end').timepicker("option","minTime", {hour:$(this).timepicker("getHour"),minute:$(this).timepicker("getMinute")});
});
$('#time-end').change(function() {
    $('#time-start').timepicker("option","minTime", {hour:$(this).timepicker("getHour"),minute:$(this).timepicker("getMinute")});
});

which is very similar to the way it's done with the jQUI Datepicker.