jquery ui datepicker give focus to the input witho

问题:

I know that jquery ui datepicker loses focus if the date is selected with a mouse. I want to able to give focus to that input field. So i did something like this

    $("#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();
});

This does gives the focus to the input field, but in IE it keeps on loading the calendar again. It does not do that in firefox or chrome. How can i be able to give focus to the input field without loading the calendar again and again in IE?

Also, if i make a input field readonly and after selecting the date in IE the field loses focus and if i try to press backspace it takes me to the previously visited page. any help is appreciated!

回答1:

My solution uses the beforeShow event to cancel the show for IE (since it seems to work okay without the hack in Chrome and Firefox). The onSelect and onClose set a flag before returning focus to the input box. See my full write-up to also send blur and change events if you need those.

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

回答2:

I had the same problem as you. To solve it I override the following methods of 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;
    }
};

Check if it works for you...

回答3:

call datepicker at document.ready event