jQueryUI datepicker - 두 번째 인스턴스가 깜박이고 show()가 호출되면 사라집니다.

Question

내 페이지에 두 개의 jQueryUI datepickers가 있습니다.

는 그들은 다음과 같이 초기화하고 있습니다 : 그들이 팝업 전에

jQuery("#departureDate").datepicker({ 
    beforeShow: function() { 
     getDatesForCalendar("outbound"); 
    }, 
    numberOfMonths: 3, 
    constrainInput: true, 
    dateFormat: 'dd/mm/yy', 
    showButtonPanel: false, 
    hideIfNoPrevNext: true, 
    onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); } 
}); 


jQuery("#returnDate").datepicker({ 
    beforeShow: function() { 
     getDatesForCalendar("return"); 
    }, 
    numberOfMonths: 3, 
    constrainInput: true, 
    dateFormat: 'dd/mm/yy', 
    showButtonPanel: false, 
    showOn: "focus", 
    hideIfNoPrevNext: true, 
    defaultDate: +1 
}); 

그들이 숨기거나 달력을 표시해야합니다 어떤 코드를 포함하지 getDatesForCalendar()를 사용하여가 사용할 수있는 날짜를 확인.

내 문제는 첫 번째 캘린더가 두 번째 전화를 걸 때 (두 번째는 onSelect입니다) 두 번째 캘린더가 잠시 동안 깜박이고 사라지는 경우입니다. 이것은 FF/Chrome 전용 문제이며 IE8에 영향을 미치지 않습니다.

저는 tabindex (지금은 아무 것도 없습니다)를 변경하고, 포커스 기능을 사용하지 않도록 설정하고, 마지막으로 수동으로 datepicker ("show")를 호출하는 대신 여러 가지 솔루션을 시도했습니다. 포커스를 호출했습니다.() 필드에 연결됩니다. 아무것도 효과가 없습니다!

조언이 있으면 으로 크게이됩니다.

많은 감사,

잭

Answer 1

은 (jsfiddle에서 관리 자원에서로드) JQuery와 UI 1.7.3

http://jsfiddle.net/6haqv/3/

가능한 버그에서 롤백해야 할 것 같은데 jquery ui 1.8

Answer 2

onSelect에 datepicker를 표시하는 대신 onClose 이벤트를 사용하십시오.

jQuery("#departureDate").datepicker({ 

      numberOfMonths: 3, 
      constrainInput: true, 
      dateFormat: 'dd/mm/yy', 
      showButtonPanel: false, 
      hideIfNoPrevNext: true, 
      onClose:function() 
       { 
       jQuery('#returnDate').datepicker('show');  
       } 
     }); 


     jQuery("#returnDate").datepicker({ 

      numberOfMonths:3, 
      constrainInput: true, 
      dateFormat: 'dd/mm/yy', 
      showButtonPanel: false, 
      showOn: "focus", 
      hideIfNoPrevNext: true, 
      defaultDate: +1 
     });​ 

Answer 3

첫 번째 날짜에서 날짜가 선택되어있는 경우에만 두 번째 datepicker를 팝업으로 표시하려고합니다. onClose를 사용하면 날짜를 선택하지 않은 경우에도 두 번째 datepicker가 표시됩니다.

이 문제를 해결하기 위해 다음을 시도해 보았습니다.

var checkin = $('#dpd1').datepicker({ 
    minDate:now, 
    numberOfMonths:2, 
    showOn: "button", 
    buttonImage: "img/calender.png", 
    buttonImageOnly: true, 
    onSelect: function(selectedDate) { 
     var dateObject=new Date(selectedDate); 
     dateObject.setDate(dateObject.getDate()+1); 
    $("#dpd2").datepicker("option", "minDate", dateObject); 
    showSecond=true; 
    }, 
    onClose: function(selectedDate) { 
     if(showSecond===true){ 
      $("#dpd2").datepicker("show"); 
      showSecond=false; 
     } 
    } 
}); 

Answer 4

임 확실하지가 해당 솔루션이 좋은 당신이 첫 번째 일정을 클릭하면 당신은 어떤 일이 일어날 보았다 못했지만, 당신은 그것을 열어 다시 시도 외부, 어떤 일을 선택 단지 간단한 클릭을 해달라고하고?

나는 그것을 시도하고 처음으로 첫 번째 달력을 열 수 있고 두 번째로는 두 번째 달력을 열어야하며 두 번째 달력을 열어야하며 첫 번째 달력을 다시 클릭 할 수 있습니다.

Answer 5

방금 ​​jQuery UI 1.11.0에서 같은 버그가 있습니다.

내가 onSelect를 날짜 선택기 방법에의 setTimeout을 호출하여 해결 방법을 발견

$('#arrival-date, #departure-date').datepicker({ 
    showAnim: 'slideDown', 
    onSelect: function(dateText, inst){ 
     if($('#arrival-date').val() != '' && $(this).is('#arrival-date')) 
     { 
      setTimeout(function() { 
       $('#departure-date').datepicker('show'); 
      }, 100); 
     } 
    } 
});