JQuery DatePicker wird nicht angezeigt

Question

Hallo, ich versuche, eine einfache Textbox mit einem Datepicker zu erstellen, der erscheint, wenn ein Benutzer hineinklickt. Ich habe Folgendes in meinem Header geladen:

    $(function() {
        $( "#datepicker" ).datepicker();
    });

Und in meinem Body habe ich die folgende Textbox:

Mein Problem ist, dass nichts passiert, wenn ich versuche, in die Textbox zu klicken. Ich bin mir nicht sicher, woran das liegen könnte. Alle Vorschläge sind willkommen.

UPDATE:

Habe es mit dem CDN versucht und auch das gesamte jQuery UI-Paket heruntergeladen, aber es wird immer noch nicht angezeigt. Habe es sowohl in IE als auch in Firefox versucht.

UPDATE 2:

Hoffte, dass der Syntaxfehler, den ich oben korrigiert habe, es lösen würde, aber leider nichts.

Answer 1

Ich bin ziemlich sicher, dass du das inzwischen behoben hast, aber hier sind ein paar Dinge, die ich versucht hätte:

Stelle sicher, dass du zuerst jQuery und dann jQuery UI holst und ein Stylesheet für .datepicker vorhanden ist.

Ändere es so, dass es nach einer Klasse statt nach einer ID sucht, da datepicker seine eigene ID einsetzt.

Wenn es sich um ein Klickevent handelte, stelle sicher, dass zuvor kein datepicker auf das Element angewendet wurde (damit für jedes neue Element ein neuer datepicker erstellt wird). z.B:

$(".addOffer").click(function(){
    //Code zum Hinzufügen eines Angebots (mit der Klasse .latest)
    $("#offers").append("");

    //Datepicker hinzufügen
    $("#offers .latest.datepickerNew").datepicker().removeClass('latest');
});

Answer 2

Ich hatte ein ähnliches Problem. Meine Lösung war es, z-index in .date-picker von datePicker.css hinzuzufügen.

.date-picker {
position: absolute;
z-index:1000;/*********** MEINE Änderung *************/
font-size: 1em;
color: #CCC;
text-align: center;
cursor: default;

border: 1px solid #444;
border-radius: 2px;
margin: 6px 0;
background: #222;
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);} 

Und mit dieser Änderung begann der Datumswähler angezeigt zu werden.

Answer 3

Finden und entfernen Sie es, wenn Sie so etwas haben!

.ui-datepicker-calendar {
    display: none;
}

Answer 4

Dies ist zwar sehr alt, aber ich bin auf das Problem gestoßen und habe eine elegante Lösung basierend auf der jQuery-Dokumentation entwickelt. Durch Verwendung des onClose-Ereignisses, das in der datePicker-API integriert ist, entferne ich einfach die hasDatepicker-Klasse.

 $(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    onClose: function() {
    $(this).removeClass("hasDatepicker");
 }});

Bitte beachten Sie, dass es idealerweise eine eindeutige ID für jedes Element gibt, manchmal ist dies jedoch nicht möglich.