wake-up-neo.com

Testen Sie, ob das Element bereits jQuery Datepicker enthält

Ich habe ein Formular mit vielen Eingabeelementen. Einige sind Datumsfelder, an die eine jQuery-Benutzeroberfläche mit datepicker angehängt ist:

$("#someElement").mask("9?9/99/9999").datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' });

Dann habe ich einen Tastenbefehl an diese Funktion gebunden:

function openCalendar() {
    var selection = document.activeElement;

    // { Need to test here if datepicker has already been initialized 
        $(selection).datepicker("show");
    // }
}

Dies funktioniert hervorragend für Elemente, die bereits mit dem Datumsauswahlfeld versehen sind. Alle anderen Felder werfen jedoch einen Javascript-Fehler aus. Ich frage mich, wie Sie am besten testen, ob Datepicker in diesem Feld bereits initialisiert wurde. 

36
macca1

Wow kann nicht glauben, dass ich diesen vermisst habe. Zeile 108 von ui.datepicker.js:

/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: 'hasDatepicker',

Also muss ich nur auf hasClass('hasDatepicker') testen. Dies scheint der einfachste Weg zu sein. Außerdem prüft diese Anweisung, ob der Datepicker aktuell geöffnet ist (für alle, die daran interessiert sind):

if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") {
    // datepicker is open. you need the second condition because it starts off as visible but empty
}
65
macca1

1) Wenn der Code beim Versuch, den Datepicker zu öffnen, einen Fehler ausgibt, können Sie den Code in try..catch eingeben

2) Sie können bei der Initialisierung des Datepickers einige Daten in das Eingabefeld setzen

$("#someElement").data("datepicker-initialized", true);

3) Sie können die vom datepicker-Plugin gespeicherten Daten verwenden

if($("#someElement").data("datepicker") != null){
   // datepicker initialized
}

oder

if($.data($('#someElement').get(0), 'datepicker')){
   // datepicker initialized
}

4) datepicker verwendet intern eine Funktion _getInst

if($.datepicker._getInst($('#someElement')[0]) != null){}

die Methode funktioniert fast genauso wie in Beispiel 3.

Konnte keine bessere Lösung finden.

10
Rafael

Eine grundlegende Lösung besteht darin, ein Attribut zum Zeitpunkt des Datepicker-Anhangs festzulegen und darauf zu testen:

$("#someElement").mask("9?9/99/9999")
.datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' })
.attr("data-calendar", "true");

Dann könnten Sie tun:

if ($(selection).attr("data-calendar") == "true")
    $(selection).datepicker("show");

Gibt es einen direkteren Weg?

1
macca1

Ich habe noch einen Fall. Mein Skript kopiert die letzten Tabellenelemente einschließlich datepicker.

Die Jquery funktioniert nicht, da das kopierte Element die Markierung "hasDatepicker" hat.

Um datepicker in einem neuen Element zu aktivieren, entfernen Sie den Klassennamen und initiieren Sie ihn wie folgt.

 $("#yournewelementid").attr("class","your-class-name"); 
 $("#yournewelementid").datepicker();    
0
Ahmad

Wenn section Ihr dom-Element für datepicker ist, überprüfen Sie, ob bereits initialisiert ist, und initialisieren Sie es zuerst als datepicker.

    // If already initialized        
    if ( typeof selection !== 'undefined' && selection.length > 0)
         $(selection).datepicker('show');
    // otherwise initialize first and show
    else 
         $(selection).datepicker().datepicker('show');
0
Zhelyo Hristov