jQuery UI 日期选择器将焦点放在输入上，而无需在 IE 中再次加载日历？

Question

我知道如果用鼠标选择日期，jQuery UI 日期选择器会失去焦点。我希望能够将焦点集中在该输入字段上。所以我做了这样的事情

$("#patientDob").live("click", function() {
$("#patientDob").datepicker({
    onSelect: function() {  
        this.focus();           
        // selecting a date moves the page, so remove the href attribute            
        $(".ui-datepicker a").removeAttr("href"); 
    },  
    changeMonth: true,
    changeYear: true,
    duration: 'fast',
    showOn: 'focus' 
}).focus();
});

这确实将焦点放在输入字段上，但在 IE 中它会继续再次加载日历。它在 Firefox 或 Chrome 中不会执行此操作。
如何才能在 IE 中一次又一次加载日历的情况下将焦点集中到输入字段？

此外，如果我将输入字段设置为只读，并且在 IE 中选择日期后，该字段将失去焦点，如果我尝试按退格键，它会将我带到之前访问过的页面。

Answer 1

我的解决方案使用 beforeShow 事件取消 IE 的显示（因为它似乎在没有 Chrome 和 Firefox 中破解的情况下工作正常）。 onSelect 和 onClose 在将焦点返回到输入框之前设置一个标志。如果您需要的话，请参阅我的完整文章还发送模糊和更改事件。

$("input.dateInput").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,

   onSelect: function(dateText, inst) {
       this.fixFocusIE = true;
       $(this).focus();
   },
   onClose: function(dateText, inst) {
       this.fixFocusIE = true;
       this.focus();
   },
   beforeShow: function(input, inst) {
       var result = $.browser.msie ? !this.fixFocusIE : true;
       this.fixFocusIE = false;
       return result;
   }
});

Answer 2

我也遇到了和你一样的问题。为了解决这个问题，我重写了 datepicker 的以下方法：

$.datepicker._attachments = function(input, inst) {
    var appendText = $.datepicker._get(inst, "appendText");
    var isRTL = $.datepicker._get(inst, "isRTL");

    if (inst.append) {
        inst.append.remove();
    }
    if (appendText) {
        inst.append = $('<span class="' + $.datepicker._appendClass + '">' + appendText + "</span>");
        input[isRTL ? "before" : "after"](inst.append);
    }
    input.unbind("focus", $.datepicker._showDatepicker);
    if (inst.trigger) {
        inst.trigger.remove();
    }
    var showOn = $.datepicker._get(inst, "showOn");
    if (showOn == "focus" || showOn == "both") {
        input.focus($.datepicker._showDatepicker);
    }
    if (showOn == "button" || showOn == "both") {
        var buttonText = $.datepicker._get(inst, "buttonText");
        var buttonImage = $.datepicker._get(inst, "buttonImage");
        inst.trigger = $($.datepicker._get(inst,"buttonImageOnly") ? $("<img/>")
                .addClass($.datepicker._triggerClass).attr({
                    src : buttonImage,
                    alt : buttonText,
                    title : buttonText
                })
                : $('<button type="button"></button>')
                .addClass($.datepicker._triggerClass)
                .html('<span class="ui-button-icon-left ui-icon ui-icon-calendar"></span><span class="ui-button-text">ui-button</span>'));
        input[isRTL ? "before" : "after"](inst.trigger);
        inst.trigger.click(function() {
            if ($.datepicker._datepickerShowing
                    && $.datepicker._lastInput == input[0]) {
                $.datepicker._hideDatepicker();
            } else {
                $.datepicker._showDatepicker(input[0]);
            }
            return false;
        });

        input.bind('focus', function(e) {
            if (!$.datepicker._datepickerShowing) {
                inst.trigger.trigger('click');
            }
        });

        input.bind('click', function(e) {
            input.trigger('focus');
        });
    }
};


$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = $.datepicker._getInst(target[0]);
    dateStr = (dateStr != null ? dateStr : $.datepicker._formatDate(inst));
    if (inst.input) {
        inst.input.val(dateStr);
    }
    $.datepicker._updateAlternate(inst);
    var onSelect = $.datepicker._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0]
        : null), [ dateStr, inst ]);
    } else {
        if (inst.input) {
            inst.input.trigger("change");
        }
    }
    if (inst.inline) {
        $.datepicker._updateDatepicker(inst);
    } else {
        if ($.datepicker._datepickerShowing) {
            inst.input.select();
        }
        setTimeout("$.datepicker._hideDatepicker()", 10);

        $.datepicker._lastInput = inst.input[0];
        $.datepicker._lastInput = null;
    }
};

检查它是否适合您...

Answer 3

在 document.ready 事件中调用日期选择器