0

我有一个 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);
    }

这是我的日期选择器代码对于其中一个文本框：

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

1 回答 1

0

我更新了函数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);
    }
于 2012-04-26T06:02:50.547 回答