Conflict with two jquery datepickers on same page

Question

So here is the setup: I have two jquery datepickers, inside a jquery tab, inside a jquery modal dialog window:

\\---/\\---/\\---/_______________
/                    


        

Answer 1

EXPLANATION of issue

I have the same issue and its very disappointing. I searched through the source code of jquery and found this:

if ( $.ui.dialog.overlayInstances ) {
    this._on( this.document, {
        focusin: function( event ) {
            if ( !$( event.target ).closest(".ui-dialog").length ) {
                event.preventDefault();
                $(".ui-dialog:visible:last .ui-dialog-content")
                    .data("ui-dialog")._focusTabbable();
            }
        }
    });
}

So when you set focus in element thats not inside the .ui-dialog, it will trigger _focusTabbable() function which set focus to the first input in dialog.

The problem is, that $.datepicker creates div on the end of body - so it is outside of .ui-dialog

If there is another input which _focusTabbable() will give focus its ok, as datepicker can handle that. But if this input has datepicker binded, it will close the previous datepicker, open another on the first input and the select on the previous datepicker is not fired.

One of possible solutions

The solution is in this case have input wich will take first focus in dialog and does not have datepicker on it.

I simply use this HTML code as first input on begin of dialog content where otherwise datepicker input will be on first place: