单击上一个和下一个按钮时，新添加的按钮未显示在 Datepicker 中

Question

我的 UI 中包含 jquery UI 日期选择器。我已从显示面板中删除了今天和关闭按钮，如下所示。

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  display:none;
} 
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
  display:none;
}

之后，我在显示面板中添加了 3 个新按钮。单击文本框时，我可以看到所有三个按钮。但是在单击上一个和下个月的按钮时，我看不到任何按钮。显示面板为空。

为什么会这样？

我的 jQuery 代码在下面添加新按钮。

$(dateFrom).datepicker({
    dateFormat: 'mm/dd/yy',
    showButtonPanel: true,
    prevText: "",
    nextText: "",
    maxDate: '+30Y',
    yearRange: '1999:c',
    beforeShow: function (input) {
        setTimeout(function () {

            var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
            var btn1Day = $('<button class="ui-state-default ui-priority-secondary ui-corner-all" type="button">1 Day</button>');
            var btn2Day = $('<button class="ui-state-default ui-priority-secondary ui-corner-all" type="button">2 Days</button>');
            var btn7Day = $('<button class="ui-state-default ui-priority-secondary ui-corner-all" type="button">7 Days</button>');

            btn1Day.bind("click", function () {
                buttonPane.hide();
                var date2 = $(input).datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                $(dateTo).datepicker('setDate', date2);
                $(dateTo).removeClass('blur').addClass('focus');
                $(input).datepicker('hide');
            });

            btn2Day.bind("click", function () {
                var date2 = $(input).datepicker('getDate');
                date2.setDate(date2.getDate() + 2);
                $(dateTo).datepicker('setDate', date2);
                $(dateTo).removeClass('blur').addClass('focus');
                $(input).datepicker('hide');
            });

            btn7Day.bind("click", function () {
                var date2 = $(input).datepicker('getDate');
                date2.setDate(date2.getDate() + 7);
                $(dateTo).datepicker('setDate', date2);
                $(dateTo).removeClass('blur').addClass('focus');
                $(input).datepicker('hide');
            });


            btn1Day.appendTo(buttonPane);
            btn2Day.appendTo(buttonPane);
            btn7Day.appendTo(buttonPane);

        }, 1);

    },
    onClose: function (input) {
        if ($(dateFrom).val() != "mm/dd/yyyy") {
            $(dateTo).datepicker("option", "minDate", $(dateFrom).val());
        }
    },
    onSelect: function (date, input) {
        $(dateFrom).removeClass('blur').addClass('focus');
        $(input).datepicker('show');
        $(date).removeClass('ui-datepicker-calendar ui-state-default').addClass('ui-state-active');
    }
});

Answer 1

日期选择器会在月/年的每次导航中重新绘制自己，因此您每次都必须添加手动按钮。我已经修改了代码以使用onChangeMonthYear 和beforeShow 实现这一点

此外，我还拆分了侦听器以使用 my-button 类为所有 buttons 工作，然后使用 data 属性来获取它需要添加的天数。

这是修改后的代码，大致符合我的想法：

$(document).ready(function () {
    dateFrom = '#datepickerfrom';
    dateTo = '#datepickerto';
    $(dateTo).datepicker();

    //datepicker override to prevent closing on date-selection
    // http://stackoverflow.com/a/1762378/1672632
    $.datepicker._selectDateOverload = $.datepicker._selectDate;
    $.datepicker._selectDate = function (id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        inst.inline = true;
        $.datepicker._selectDateOverload(id, dateStr);
        inst.inline = false;
        this._updateDatepicker(inst);
    }

    // Delegated click listener
    $(document).on("click", '.my-button', function () {
        var input = $(this).parents('.ui-datepicker').get(0);
        var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
        buttonPane.hide();
        var date2 = $(dateFrom).datepicker('getDate');
        var myDays = $(this).data('days');
        date2.setDate(date2.getDate() + myDays);
        $(dateTo).datepicker('setDate', date2);
        $(dateTo).removeClass('blur').addClass('focus');
        $(input).datepicker('hide');
    });

    function addButtons(input) {
        setTimeout(function () {
            var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
            var btn1Day = $('<button data-days="1" class="my-button ui-state-default ui-priority-secondary ui-corner-all" type="button">1 Day</button>');
            var btn2Day = $('<button data-days="2" class="my-button ui-state-default ui-priority-secondary ui-corner-all" type="button">2 Days</button>');
            var btn7Day = $('<button data-days="7" class="my-button ui-state-default ui-priority-secondary ui-corner-all" type="button">7 Days</button>');
            btn1Day.appendTo(buttonPane);
            btn2Day.appendTo(buttonPane);
            btn7Day.appendTo(buttonPane);
        }, 1);

    }

    $(dateFrom).datepicker({
        dateFormat: 'mm/dd/yy',
        showButtonPanel: true,
        prevText: "",
        nextText: "",
        maxDate: '+30Y',
        yearRange: '1999:c',
        beforeShow: function (input) {
            addButtons(input);
        },
        onChangeMonthYear: function (year, month, input) {
            addButtons(input);
        },
        onClose: function (date, input) {
            if ($(dateFrom).val() != "mm/dd/yyyy") {
                $(dateTo).datepicker("option", "minDate", $(dateFrom).val());
            }
        },
        onSelect: function (date, input) {
            // Got to call addButtons again on selection of a date.
            addButtons(input);
        }
    });
});

演示：http://jsfiddle.net/robschmuecker/5m4tP/1/