0

日付範囲を受け入れるために使用されるJquery日付ピッカーに関連付けられた2つのテキストボックスを持つ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);
    }

これは私の日付ピッカーコードです。テキストボックスの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 に答える