Conflict with two jquery datepickers on same page

I think you have another code that interfere with the javascript as this : http://jsfiddle.net/fMD62/

works perfectly (with jquery 1.9.1 and jqueryui 1.9.2

maybe try

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

UPDATE: It looks like the behavior described below was addressed in another stackoverflow question here:
Prevent jQuery UI dialog from setting focus to first textbox

Apologies for the "duplicate" question - if I had known this was the problem I would have figured it out quickly!!!

################################################################################

Well, the resolution is very simple, and perhaps someone can enlighten me as to why it works this way because I'm a bit clueless at the moment.

Here's what I did:
I added another two text input fields to the form (they were needed) and reordered the layout so that one of those new input fields was the "first" element (in the top-left corner), like so:

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

Suddenly the problem has vanished! However, I notice an interesting behavior:
When I select a date in EITHER datepicker, the cursor then immediately jumps back to the first text field. So if this were happening when I had the datepickers with no text fields, that behavior would mean that the cursor would immediately have jumped back to the first datepicker which could have cause the issue I was having.

Now, as to WHY it works this way I have no idea. I tried setting the tabindex parameters for the various textfields/datepickers but that didn't change the behavior.

Anyway, I appreciate the input from everyone who chimed in - this was a weird problem, but I'll never forget how to fix it now. Thanks everyone for your help!!

Try this friend: in your JS

 $(function() {   
       $( "#from" ).datepicker({   
      defaultDate: "+1w",  
      changeMonth: true,   
      numberOfMonths: 1,  
      onClose: function( selectedDate ) {  
        $( "#to" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });  
  });  
  

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Start date: <input type="text" id="from" name="from"> 
End date: <input type="text" id="to" name = "to">

In your input

Start date: input type="text" id="from" name="from"

End date: input type="text" id="to" name = "to"

This worked for me :)

by MacElie M.