jQuery Datepicker „After Update“ Event oder Äquivalent

Lesezeit: 3 Minuten

jQuery Datepicker „After Update Event oder Aquivalent
andleer

Ich verwende einen Standard-jQuery-Datepicker und muss den Text in jedem TD basierend auf einigen täglichen Statusinformationen ändern. Mir ist klar, dass ich das verkabeln kann beforeShowDay Ereignis, aber das erlaubt mir nur, CSS-Informationen für jedes Datum zu ändern. In der Hoffnung auf ein Ereignis im gesamten Kalender wie z afterRender etc.

Ich kann den ersten angezeigten Kalender ändern, aber wenn der Benutzer Monate oder Jahre ändert, bin ich (oder mein Code) nicht auf dem Laufenden.

jQuery Datepicker „After Update Event oder Aquivalent
Markus

wenn Sie ein “afterShow”-Ereignis vor jquery-ui Version 1.9 benötigen, können Sie die Funktion datepicker._updateDatepicker überschreiben.

zum Beispiel:

$(function() {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }
});

Jetzt löst der Datepicker nach jeder Aktualisierung des Datepicker-Elements ein “afterShow”-Ereignis aus.

Ich weiß, dass dies nicht der beste Weg ist, um dieses Problem zu lösen, aber es ist besser, als den ursprünglichen jquery-ui-Code zu ändern.

  • Im Idealfall sollten Affen-Patches aussehen, überprüfen Sie die Bibliotheksversion. Erwägen Sie, dies am Anfang der Funktion hinzuzufügen: if ($.ui.version == undefined && $.ui.version.indexOf('1') != 0) { return; }

    – MW.

    21. Oktober 13 um 9:15 Uhr

  • Du könntest alles einpacken (function($) { und })(jQuery);, anstatt $(function() {}); wie das Widget gemacht wird.

    – Maschinensüchtig

    15. April 15 um 12:37 Uhr


  • Es ist eine brillante Lösung. Funktioniert mit jquery ui 1.11.4 + jquery 1.11.3

    – Benutzerland

    31. Mai 16 um 4:54 Uhr

Sieht aus wie afterShow() und onAfterChangeMonthYear() Es wurden bereits Verbesserungen angehoben, aber es scheint noch keine Arbeit daran zu geben.

Du könntest es (vorerst) selbst umsetzen…

Laden Sie die herunter neueste unkomprimierte Quelle v1.8.13 – sehen http://blog.jqueryui.com/2011/05/jquery-ui-1-8-13/ und suchen _updateDatepicker: function(inst) { fügen Sie dann einen neuen Funktionsaufruf hinzu. So habe ich die neue Funktion angelegt:

_updateDatepicker: function(inst) {
    // existing jQueryUI code cut for brevity
    this._afterShow(inst);
},
_afterShow: function(inst) {
    var afterShow = this._get(inst, 'afterShow');
    if (afterShow)
        afterShow.apply((inst.input ? inst.input[0] : null),
                [(inst.input ? inst.input.val() : ''), inst, inst.dpDiv.find('td:has(a)')]);
},

Ich habe gerade die Funktion so codiert, dass sie dieselbe Signatur wie hat beforeShow() aber dann einen 3. Parameter hinzugefügt – ein Array von <td> Elemente.

Sie können dann Ihren eigenen Rückruf hinzufügen datepicker() auf die übliche Weise.

<script type="text/javascript">
    $(function() {
        $('#dp').datepicker({
            afterShow: function (input, inst, td) {
               console.log(td); // needs a browser with a console (Chrome / Firefox+Firebug for example)
            }
        });
    });
</script>
<input type="text" id="dp"/>

Notiz: Ich habe nicht viel getestet, aber es scheint aufgerufen zu werden, nachdem der Datepicker gerendert wurde. Es kann etwas mehr Arbeit erfordern, um Ihren Anforderungen gerecht zu werden, wenn es nicht genau das ist, wonach Sie suchen. Hoffe es hilft trotzdem 🙂

  • Diese Antwort scheint mein Problem zu lösen, aber ich habe die eigentliche Lösung nicht untersucht. Wir haben entschieden, dass die Möglichkeit, den Tag über das onBeforeShowDay-Event zu gestalten, vorerst wahrscheinlich 80 % der Bedürfnisse unserer Kunden abdeckt. (Unser Kunde ist eine interne Fachabteilung in unserem Unternehmen und das reicht erstmal.)

    – Andler

    20. Juni 11 um 19:56 Uhr

  • Gute Antwort. Sie sollten Ihre Änderung jedoch extern anhängen, um die ursprüngliche jquery-Datei intakt zu lassen. In Ihrer richtigen JS-Datei können Sie Änderungen vornehmen, z. B. das Speichern der ursprünglichen Funktion $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker; und modifizieren Sie die neue Version (die die alte zuerst aufruft).

    – MatRt

    11. April 13 um 4:33 Uhr

Du kannst das:

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       /*some function to do before display*/ 
   },
   onChangeMonthYear: function(year, month, inst) { 
       /*some function to do on month or year change*/ 
   }
});

Siehe DOKUMENTE

  • Neal, ich kenne diese und verwende sie tatsächlich in dieser speziellen Anwendung, aber ich muss den TD-Textinhalt ändern, nachdem der Text gerendert wurde, und das kann nur erreicht werden, nachdem diese Ereignisse ausgelöst wurden. Sogar ein Ereignis wie afterShowDay(date) würde funktionieren.

    – Andler

    13. Juni 11 um 20:41 Uhr

Ich weiß, es ist ein weiterer hässlicher Hack, aber ich füge einfach eine Zeitüberschreitung hinzu, wie diese;

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       setTimeout(function() {
            //your code  
       }, 50); /* TD content is already rendered */ 
   },
});

.

573090cookie-checkjQuery Datepicker „After Update“ Event oder Äquivalent

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy