beforeShow-Ereignis wird bei jQueryUI Datepicker nicht ausgelöst

Question

Egal was ich versuche, ich bin nicht in der Lage, das beforeShow-Ereignis auf meinem Datepicker auslösen. Hier ist mein Code:

$('#calendar').datepicker({
inline: true,
dateFormat: 'mm,dd,yy',
beforeShow: function(input, inst) { alert('before'); }
});

Ich habe beforeShowDay und onSelect-Ereignisse zu meinem Datepicker hinzugefügt, und sie werden korrekt ausgelöst. Hat jemand anderes Probleme mit diesem hatte?

Answer 1

Hier ist die Lösung, die sich mein Team ausgedacht hat, damit wir nicht jedes Mal daran denken müssen, die jQuery-Dateien zu ändern, wenn es ein Update gibt. Fügen Sie dies einfach zu Ihrem eigenen Skript hinzu und binden Sie es ein:

(function ($) {
    $.extend($.datepicker, {

        // Reference the orignal function so we can override it and call it later
        _inlineDatepicker2: $.datepicker._inlineDatepicker,

        // Override the _inlineDatepicker method
        _inlineDatepicker: function (target, inst) {

            // Call the original
            this._inlineDatepicker2(target, inst);

            var beforeShow = $.datepicker._get(inst, 'beforeShow');

            if (beforeShow) {
                beforeShow.apply(target, [target, inst]);
            }
        }
    });
}(jQuery));

Answer 2

Eigentlich ist dies ein wenig korrekter (und folgt dem Plugin/Klassen-Muster):

var beforeShow = $.datepicker._get(inst, 'beforeShow');
extendRemove(inst.settings, (beforeShow ? beforeShow.apply(target, [target, inst]) : {}));

Answer 3

Ich habe eine Lösung für dieses Problem gefunden. Sie müssen 3 Codezeilen in jquery.ui.datepicker.js (die Vollversion) hinzufügen

In der Nähe der Zeile #274 finden Sie Folgendes this._updateAlternate(inst);

Direkt nach dieser Zeile fügen Sie die folgende Zeile ein:

var beforeShow = $.datepicker._get(inst, 'beforeShow');
if(beforeShow)
   beforeShow.apply();

In der Version von jqueryui.com ist beforeShow für den Inline-Datepicker nicht aktiviert. Mit diesem Code, ist beforeShow aktiviert.

Answer 4

Ich wollte beforeShow verwenden, um das Mindestdatum in einem Enddatum-Datumsauswahlfeld zu aktualisieren, um das Datum im Startdatum-Datumsauswahlfeld anzuzeigen. Ich habe eine Reihe von Lösungen hier und anderswo gepostet, die kompliziert waren revewed. Vielleicht übersehe ich etwas, aber der folgende, recht geradlinige Code funktioniert bei mir.

Dadurch wird der Fokus auf das Startdatum zurückgesetzt, falls noch keines festgelegt ist, und es wird versucht, ein Enddatum einzugeben. Wenn ein Startdatum festgelegt wurde, wird das Mindestdatum für das Enddatum entsprechend eingestellt.

    $(function(){
    $("#start_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy"
    });
    $("#end_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy",
        beforeShow: end_Range
    });

    function end_Range(){
        if ($("#start_Date").datepicker("getDate") == null ){
            $("#start_Date").focus();
        } else {
            // set minimum date range
            $("#end_Date").datepicker("option", "minDate", new Date ($("#start_Date").datepicker("getDate")));
        };
    };
});

Mit Datumsfeldern:

<label>Date</label><input class="datepicker" id="start_Date" type="text"/>
<label>Date</label><input class="datepicker" id="end_Date" type="text"/>

Answer 5

Es ist ein bisschen kompliziert, aber verwenden Sie die setTimeout Methode zum Starten der Funktion funktioniert bei mir gut.

$('#calendar').datepicker({
inline: true,
dateFormat: 'mm,dd,yy',
beforeShow: function() { 
    setTimeout(function() {
        alert('before'); 
    }, 10);
}
});