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

```
\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

```

The first datepicker functions normally, but when I try to click a date in the second datepicker it simply activates the first one. Did you follow that? :)

So to sum up, clicking a date in datepicker2 activates datepicker1.

I have no idea why this is happening - they have different ids and names, as outlined below.

To create the datepickers I'm just using:

```
$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

```

The fields are simply:

```
<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

```

I'm using jQuery v1.9.0 and jQueryui v1.10.0.

Any thoughts on this? As a caveat, I am unable to post actual code due to restrictions from my employer, but I can answer most questions if you need any clarification. Any and all help would be greatly appreciated!!
['https://Stackoverflow.com/questions/16169654', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2311268/']
On your example both datepickers have different id's and name's, however, the problem you describe is exactly what'll happen if you use the same name for both.

Does your actual code use different id and name for both datepickers?
**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:

```
<span class="ui-helper-hidden-accessible"><input type="text" /></span>

```