jQueryUI datepicker -当show()被调用时，第二个实例闪烁然后消失

jQueryUI datepicker - second instance flashes then disappears when show() is called

本文关键字：第二个 实例 闪烁 消失 然后 调用 datepicker show jQueryUI      更新时间：2023-09-26

我的页面上有两个jQueryUI日期摘取器。

它们的初始化如下:

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")，我尝试调用focus()在它所绑定的字段上。什么都没用!

任何建议都将非常感谢。

许多谢谢,

杰克

使用onClose事件代替在onSelect中显示日期选择器

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

看起来你将不得不回滚到jquery ui 1.7.3(加载在jsfiddle的管理资源下)

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

jquery ui 1.8可能存在的bug

我想只有在第一个日期被选中时才弹出第二个日期选择器。如果我使用onClose，即使没有选择任何日期，第二个日期选择器也会显示。

为了解决这个问题，我尝试了以下方法，它有效。

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

我刚刚在jQuery UI 1.11.0中遇到了同样的错误。

我找到了一个解决方案，通过调用setTimeout在onSelect日期选择方法:

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

我不确定是解决方案是好的，你看到发生了什么，如果你点击第一个日历，但你不选择任何一天，只是简单地点击外面，然后再试着打开它?

我试了一下，你可以第一次打开第一个日历，第二次你不能，你需要打开第二个日历，然后你可以再次点击第一个日历。

相关文章：