ejemplos - jquery ui datepicker da enfoque a la entrada sin cargar el calendario de nuevo en IE?

jquery ui download

Question

Sé que jquery ui datepicker pierde el foco si la fecha se selecciona con un mouse. Quiero poder concentrarme en ese campo de entrada. Entonces hice algo como esto

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

Esto le da el foco al campo de entrada, pero en IE sigue cargando el calendario nuevamente. No hace eso en Firefox o Chrome. ¿Cómo puedo enfocar el campo de entrada sin cargar el calendario una y otra vez en IE?

Además, si hago un campo de entrada de solo lectura y después de seleccionar la fecha en IE, el campo pierde el foco y si trato de presionar la tecla de retroceso, me lleva a la página visitada anteriormente. cualquier ayuda es apreciada!

Answer 1

llamar a datepicker en el evento document.ready

Answer 2

Yo tenía el mismo problema que tú. Para resolverlo anulo los siguientes métodos de 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;
    }
};

Compruebe si funciona para usted ...

Answer 3

Mi solución usa el evento beforeShow para cancelar el show para IE (ya que parece funcionar bien sin el hack en Chrome y Firefox). OnSelect y onClose configuran un indicador antes de volver a enfocar el cuadro de entrada. Vea mi descripción completa para enviar también desenfoque y cambiar eventos si los necesita.

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