Question

我有一个JQuery对话框，其中有两个与Jquery日期选择器关联的文本框，用于接受日期范围。

我在Jquery日期选择器中添加了一个名为“保存”的自定义按钮。问题是，当我单击按钮时，与其关联的功能会执行，但日历仍保持打开状态。我必须点击日期选择器之外的区域才能使日历关闭。我该如何解决？这只能在IE上看到。适用于FF。

var startDateTextBox = $('#StartDate');
var endDateTextBox = $('#EndDate');

这是我的自定义功能：

    function addSaveButton(textBoxObject)
    {
        //These variables can be ignored. Used to set limits for the other datepicker
        var idTextBox = textBoxObject.attr('id');
        var otherTextBoxObject = idTextBox == "StartDate" ? endDateTextBox : startDateTextBox;
        var optionName = idTextBox == "StartDate" ? "minDate" : "maxDate";

        setTimeout(function ()
        {
            var buttonPane = textBoxObject
                                .datepicker("widget")
                                .find(".ui-datepicker-buttonpane");

            $("<button>", {
                text: "Save",
                click: function ()
                {
                    //Get the date
                    var dateToBeSet = getDateToSet(idTextBox);

                    //Set the date
                    textBoxObject.datepicker('setDate', dateToBeSet);

                    //Set the limits for the other date picker
                    otherTextBoxObject.datepicker("option", optionName, dateToBeSet);

                    //Hide this datepicker
                    textBoxObject.datepicker("hide");

                    //Remove focus
                    textBoxObject.blur();
                }
            }).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
        }, 1);
    }

这是我的datepicker代码，用于其中一个文本框：

startDateTextBox.datepicker({
        autoSize: true,
        closeText: "OK",
        showButtonPanel: true,
        constrainInput: true,
        showWeek: true,
        maxDate: "+0",
        dateFormat: 'd MM yy',
        changeMonth: true,
        changeYear: true,

        beforeShow: function (input, inst)
        {
            addSaveButton(startDateTextBox);
        },

        onChangeMonthYear: function (year, month, inst)
        {
            addSaveButton(startDateTextBox);
        },

        onSelect: function (dateText, inst)
        {
            //Set the limits for the other date picker
            instance = startDateTextBox.data("datepicker");
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
                                    dateText,
                                    instance.settings);

            endDateTextBox.datepicker("option", "minDate", date);
        },

        onClose: function (dateText, inst)
        {
            //Remove focus
            startDateTextBox.blur();
        }
    });

Answer 1

我更新了函数addSaveButton(textBoxObject)，并添加了代码以暂时禁用与数据贴纸关联的输入文本框，并且它有效。

function addSaveButton(textBoxObject)
    {
       ...

        setTimeout(function ()
        {
            var buttonPane = textBoxObject
                                .datepicker("widget")
                                .find(".ui-datepicker-buttonpane");

            $("<button>", {
                text: "Save",
                click: function ()
                {
                    .
                    .
                    .

                    //Remove focus
                    textBoxObject.blur();

                    //Disable textbox
                    textBoxObject.attr("disabled", "disabled");

                    setTimeout(function ()
                    {
                        // Removed the 'disabled' attribute after 1 millisecond
                        textBoxObject.removeAttr("disabled");  
                    }, 1);

                }
            }).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
        }, 1);
    }

从自定义按钮调用JQuery datepicker hide（），日历在IE中重新打开

1 个答案: