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/']
Case 1:  

@antony's comment(including jsfiddle link below the question) works as of  

version `jquery-1.9.1` and `1.9.2/jquery-ui.js`

Case 2:  

OP's case where datepicker1 works well but choosing datepicker2 will open datepicker1  

version: `jQuery v1.9.0` and `jQueryui v1.10.0`

Case 3:  

My case where choosing datepicker1 works well but choosing datepicker2 has no any effect.  

version: `jquery-3.1.1.min.js` and `jQueryui v1.12.1`

Case 3 solution:  

initialize date1 first `$('date1').datepicker()` date1 will works  

For date2, first destroy date1 then initialize date2 

```
$('date1').datepicker('destroy');
$('date2').datepicker();

```

Now for date1, destroy date2 and initialize date1.
Just to preface, I am a backend database programmer so know little about JavaScript so looked to find this post with the exact same question. Gleaning from what I read above and comparing to my existing code, I modified my JavaScript so that it works and thought I would share it.

The only caveat was that my existing forms with single date selectors no longer worked so I had to add a bit to handle those and all seem fine now. In this case, the database fields are actually a Unix timestamp so the form gets processed when submitted with the two fields converted as needed but for clarity, I did not include that code here.

```
$(document).ready(function(){ 
       $( "#StartDate" ).datepicker({   
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {  
        $( "#StartDate" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#EndDate" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
      }
    }); 
        $( "#datepicker" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
      }
    });     
  });

```