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

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 );
      }
    });     
  });

Answer 2

This is a total shot in the dark but have you tried initialising each one seperately? Something like the following

$(function() {
    $('.datepicker').each(function(){
        $(this).datepicker();
    });
});

It's probably what the others have mentioned and you are encountering some form of interference with your code, but it's worth a quick shot.

Answer 3

Try putting the contents of the JQuery UI Dialog into an IFrame. That might help you get around some of your issues.

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/

Answer 4

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?

Answer 5

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.

Answer 6

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!!