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

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.