Handle multiple time input fields more seamlessly

[tylerwilson]

Good day,

I have a page with two time input fields using wicked picker. I can open one, but when I change focus to another, the first one remains and the second does not appear.

From the wicked picker home page demo section that same thing occurs, even when they have different IDs - that intro page seems to imply if they are different IDs the switch should be handled.

I am running in Safari 9.1.2 on OS X 10.11.6.

[dfklud]

Hello,

Found a temporary fix. I just close the div when another wicked picker element is selected. $('#timedlist-time_start,#timedlist-time_end').focus(function(){ $('.wickedpicker').css({'display': 'none'}); }); $('#timedlist-time_start').wickedpicker({now: $('#timedlist-time_start').val()}); $('#timedlist-time_end').wickedpicker({now: $('#timedlist-time_end').val()});

[cautbur]

I think this is a better solution: $(".timepicker").focus(function(){ var obj = $(this); $('.wickedpicker').each(function(){ if($(this) != obj) { $(this).css({'display': 'none'}); } }); });

[rseyferth]

Thanks, that helped me along. I ended up implementing it without needing an 'each':

options.beforeShow = () => {
    currentlyActiveWickedpicker = this;
};
options.beforeHide = () => {
    if (currentlyActiveWickedpicker === this) currentlyActiveWickedpicker = false;
};

// Create component
this.$input = this.$element.find('input');
this.$input.wickedpicker(options);
this.$input.on('focus', () => {

    // Hide old picker?
    if (currentlyActiveWickedpicker && currentlyActiveWickedpicker !== this) {
        $('body > .wickedpicker').css('display', 'none');
    }

});

(I've wrapped the wickedpicker in a component class)

Would be nice though if the extension itself did this, or had a bit more public methods (hide, show, etc). The fact that display: none; would work is not really clear when just using the extension.