第二个datepicker立即关闭

Question

我使用下面的代码在我的网站上使用jQuery的datepicker。

$('.datepicker').datepicker({ 
      inline: true, 
      showButtonPanel: true, 
      showOtherMonths: true, 
      showOn: "both", 
      buttonImage: "/images/calendar.png", 
      buttonImageOnly: true, 
      beforeShow: function(elem){ 
       setTimeout(function(){ 
        var buttonPane = $(elem).datepicker("widget").find(".ui-datepicker-buttonpane"); 
        var btn = $('<a class="ui-datepicker-clear ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Clear Dates</a>'); 
        btn.unbind("click").bind("click", function() { 
         $.datepicker._clearDate(elem); 
        }); 
        buttonPane.empty(); 
        btn.appendTo(buttonPane); 
       },1); 
      }, 
      onChangeMonthYear:function(elem){ 
       setTimeout(function(){ 
        var buttonPane = $(elem).datepicker("widget").find(".ui-datepicker-buttonpane"); 
        var btn = $('<a class="ui-datepicker-clear ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Clear Dates</a>'); 
        btn.unbind("click").bind("click", function() { 
         $.datepicker._clearDate(elem); 
        }); 
        buttonPane.empty(); 
        btn.appendTo(buttonPane); 
       },1); 
      }, 
      onClose:function(){ 
       $('#to').datepicker('show'); 
      }, 
      onSelect:function(date,inst){ 
       $('#to').datepicker('show'); 
      } 
     }); 

但是当我选择一个日期时，第二个日期选择器会在打开时立即打开和关闭。我在这里做了什么错事？

Answer 1

我认为这与timig问题有关，尝试使用settimeout并在函数内打开第二个datepicker。

我添加了一个检查以避免to元素在关闭时自行打开。

代码：

$('.datepicker').datepicker({ 
    showButtonPanel: true, 
    showOtherMonths: true, 
    showOn: "both", 
    buttonImage: "/images/calendar.png", 
    buttonImageOnly: true, 
    beforeShow: function (elem) { 
     setTimeout(function() { 
      var buttonPane = $(elem).datepicker("widget").find(".ui-datepicker-buttonpane"); 
      var btn = $('<a class="ui-datepicker-clear ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Clear Dates</a>'); 
      btn.unbind("click").bind("click", function() { 
       $.datepicker._clearDate(elem); 
      }); 
      buttonPane.empty(); 
      btn.appendTo(buttonPane); 
     }, 1); 
    }, 
    onChangeMonthYear: function (elem) { 
     setTimeout(function() { 
      var buttonPane = $(elem).datepicker("widget").find(".ui-datepicker-buttonpane"); 
      var btn = $('<a class="ui-datepicker-clear ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Clear Dates</a>'); 
      btn.unbind("click").bind("click", function() { 
       $.datepicker._clearDate(elem); 
      }); 
      buttonPane.empty(); 
      btn.appendTo(buttonPane); 
     }, 1); 
    }, 
    onClose: function() { 
     if ($(this).attr('id') === 'to') return true 
     setTimeout(function() { 
      console.log(this) 
      $("#to").datepicker('show'); 
     }, 10); 
    }, 
    onSelect: function (date, inst) { 
     if ($(this).attr('id') === 'to') return true 
     setTimeout(function() { 
      $("#to").datepicker('show'); 
     }, 10); 
    } 
}); 

演示：http://jsfiddle.net/IrvinDominin/8M5dD/