jquery ui datepicker-geben Sie den Fokus auf die Eingabe ohne laden der Kalender wieder im IE?

Ich weiß, dass jquery ui datepicker verliert den Fokus, wenn das Datum mit der Maus ausgewählt. Ich möchte in der Lage, um den Fokus zu diesem Eingabefeld. Also ich habe so etwas wie dieses 

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










Dies tut, gibt den Fokus an das input-Feld, aber im IE hält es die Verladung der Kalender wieder. Es funktioniert nicht in firefox oder chrome. Wie kann ich in der Lage sein, um den Fokus auf das Eingabefeld, ohne das laden der Kalender wieder und wieder im IE? 


Auch, wenn ich ein input-Feld auf readonly und nach der Auswahl des Datums im IE das Feld verliert den Fokus, und wenn ich versuche, drücken Sie die Rücktaste, es nimmt mich zu der zuletzt besuchten Seite.

jede Hilfe ist willkommen!




    

  • so haben Sie die datepicker-showOn eine fucus-Ereignis, und Sie haben den input-Fokus erhalten, wenn Sie klicken Sie auf die Datumsauswahl. natürlich ist es mal tun. warum machst du das? wenn Sie klicken Sie auf die Datumsauswahl, sind Sie mit der datepicker nicht die Eingabe. die einzige andere option ist, um die datepicker nur angezeigt, wenn Sie klicken Sie auf ein datepicker-Taste statt auf die Konzentration.
    • 

  • ich Tue das, weil das input-Feld für die Datumsauswahl wird geladen durch ajax. ich brauche eine Methode zum einrichten der datepicker auf das Eingabefeld
    • 






InformationsquelleAutor kd44 | 2011-01-12
  1. 3

    Meine Lösung nutzt das beforeShow Veranstaltung zu stornieren, die show für den IE (da scheint es zu funktionieren ohne den hack in Chrome und Firefox). Der onSelect-und onClose-flag, vor der Rückkehr der Fokus auf das Eingabefeld. Siehe mein full write-up zu auch die schicken blur-und change-events, wenn Sie benötigt wird.

    $("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;
   }
});
    • sollte nicht der zweite this.focus(); werden $(this).focus();?
    • [auch veröffentlicht auf dein full write-up]. Durch isolation, ich habe ein Problem mit den beforeShow Ereignis-code. In einem Formular mit 2 Felder, verwenden Sie die Kalender-picker, das Feld, enthält die beforeShow-Anweisung endet als deaktiviert.
    InformationsquelleAutor Jeff Sheets
  2. 1

    Ich hatte das gleiche problem wie du. Um es zu lösen, die ich überschreiben der folgenden Methoden der 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;
    }
};

    Prüfen, ob es für Sie arbeitet...

    InformationsquelleAutor Hegler
  3. -1

    call-datepicker im Dokument.ready-Ereignis

    InformationsquelleAutor Sebastian
Schreibe einen Kommentar