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/

第二个datepicker立即关闭

1 个答案: