JQUERY UI: Datepicker funktioniert nicht - Jquery (ui) Einbindung funktioniert nicht?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von BladeFire, 28. Juli 2015 .

  1. 28. Juli 2015
    Hallo,


    ich bin mit der Benützung von Jquery, Jquery UI (und ein bisschen auch in JS) noch etwas (sehr) unerfahren. Ich versuche nun schon seit mehreren Stunden einen Datepicker in eine Webseite zu integrieren. (Zuvor habe ich mich noch nie mit Jquery oder Jquery UI auseinandergesetzt. Bitte entschuldigt meine "Anfängerfragen")

    Vorgeschichte:

    Ich habe mir Jquery "jquery-2.1.4.min.js" auf der offiziellen Webseite heruntergeladen und in meinen Webseiten Ordner in den Ordner "js" unter den Namen "jquery-2.1.4.min.js" gelegt. Ich habe dies in meiner Webseite eingebunden

    "<script language="javascript" type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>"

    Anschließend habe ich mir auf der offiziellen Webseite von Jquery UI das Aktuelle Custom Pack (1.11.4) (mit allen check boxen angehakt) heruntergeladen.

    folgende Datein waren im Ordner

    Bild

    ich habe alle, sowie die jquery datei die sich im Externial Ordner befand in das html Dokument eingebunden.

    Danach habe ich einem Input Tag vom Typ text die Id Date gegeben.

    Währenddessen habe ich mir folgendes Video angeschaut:

    https://www.youtube.com/watch?v=tkKrvgANv8A

    Ich habe eine eine neue js datei erstellt und diese eingebunden.

    In diese Habe ich folgendes geschrieben.

    $('#date').datepicker({})

    So sieht der Header meiner HTML Datei im Browser aus:

    HTML:
     <link type="text/css" rel="stylesheet" href="../css/normalize_v1.css">
     <link type="text/css" rel="stylesheet" href="../css/normalize_v3.css">
     <link type="text/css" rel="stylesheet" href="../css/font-awesome.css">
     <link type="text/css" rel="stylesheet" href="../css/font-awesome.min.css">
     <link type="text/css" rel="stylesheet" href="../css/main.css">
     <link type="text/css" rel="stylesheet" href="../css/jquery-ui.css">
     <link type="text/css" rel="stylesheet" href="../css/jquery-ui.theme.css">
     <link type="text/css" rel="stylesheet" href="../css/jquery-ui.structure.css">
     
     
     <script src="../js/modernizr.js"></script>
     <script language="javascript" type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
     <script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
     <script language="javascript" type="text/javascript" src="../js/jquery-ui.js"></script>
     <script language="javascript" type="text/javascript" src="../js/ui.js"></script>
    
    So sieht das Input Feld im Browser aus.
    HTML:
     <td>
     <input id="date" required="required" type="text" value="23.07.2015" name="update_gültigab" style="width: 50%" />
     </td>

    Danke für eure Mühen.

    (Ein guter link der mir helfen könnte ist ebenfalls herzlichst willkommen.)

    Lg

    - Simon
     
  2. 28. Juli 2015
    AW: JQUERY UI: Datepicker funktioniert nicht - Jquery (ui) Einbindung funktioniert nicht?

    Liegen deine css und js ordner wirklich eins tiefer als deine HTML-Datei? (habe die ../ entfernt)
    HTML:
     <link type="text/css" rel="stylesheet" href="css/normalize_v3.css">
     <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
     <link type="text/css" rel="stylesheet" href="css/main.css">
     <link type="text/css" rel="stylesheet" href="css/jquery-ui.css">
     <link type="text/css" rel="stylesheet" href="css/jquery-ui.theme.css">
     <link type="text/css" rel="stylesheet" href="css/jquery-ui.structure.css">
     
     
     <script src="js/modernizr.js"></script>
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script src="js/ui.js"></script>
    js/ui.js
    Code:
    $(function() {
     // dieser code wird ausgeführt sobald der DOM ready ist. Vorher gibt es dein Input-Element nicht. (Ausgenommen du packst deine Script-Tags vor dem schließenden Body-Tag (</body>))
     $('#date').datepicker()
    });
     
  3. 28. Juli 2015
    AW: JQUERY UI: Datepicker funktioniert nicht - Jquery (ui) Einbindung funktioniert nicht?

    Danke Nanobyte für deine schnelle Antwort. (Und deine extreme Aktivität. // Du hast mir schon des öfteren geantwortet und dafür möchte ich dir speziell Danken.)

    Meine Css und Js Ordner liegen in der selben Tiefe. // im Endeffekt. (Eins zurück und dann wieder vor ..\exampe.cc)

    Hier ein Bild (strg+scrollen macht das bild schärfer):

    Bild


    Ich denke, dass ich ein sehr simples Problem habe, da ich neu in der ganzen Jquery (UI) Sache bin.

    ________________________________________________________________________________________________________________________________________
    10 Minuten nachdem ich dies geschrieben habe (und mir deinen Beitrag nochmals genau angeschaut habe) :

    Bild

    yeaaahhh!!!

    Es hat funktioniert! (Ich weis zwar nicht warum es auf einmal funktioniert hat - Aber mit der Methode:

    Code:
    $(function(){
     
     $('#date').datepicker() 
    })
    in die ui.js zu schreiben. Aber es hat funktioniert)

    Jetzt muss ich nur noch herausfinden wie man dies Personalisiert. (und das auch Pfeile dabei sind. siehe Screenshots. // Ich denke, dass es ein Problem mit dem Pfeilen gibt weil ich die bilder die beim jquery UI dabei waren nicht eingebunden habe. Aber darum kümmere ich mich morgen.) Auf jedenfall kann ich jetzt beruhigt schlafengehen ohne dass Gefühl zu haben etwas lösen zu müssen. (ich kann einfach nicht einschlafen wenn ich ein ungelöstes Problem habe)

    Ich möchte dir nochmals dafür Danken!

    Lg

    - Simon
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.