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

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.

Answer 2

in a js archive:

$("#fecha_1").datepicker({
    dateFormat: "dd/mm/yy",
    dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
    dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
    monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
    prevText: "Ant",
    nextText: "Sig",
    currentText: "Hoy",
    changeMonth: !0,
    changeYear: !0,
    showAnim: "slideDown",
    yearRange: "1900:2100"
});

$("#fecha_2").datepicker({
    dateFormat: "dd/mm/yy",
    dayNames: "Domingo Lunes Martes Miercoles Jueves Viernes Sabado".split(" "),
    dayNamesMin: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    dayNamesShort: "Do Lu Ma Mi Ju Vi Sa".split(" "),
    monthNames: "Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre".split(" "),
    monthNamesShort: "Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic".split(" "),
    prevText: "Ant",
    nextText: "Sig",
    currentText: "Hoy",
    changeMonth: !0,
    changeYear: !0,
    showAnim: "slideDown",
    yearRange: "1900:2100"
}); 

in ur page: <input type="text" id="fecha_1"><input type="text" id="fecha_2">

Answer 3

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>

Answer 4

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