Webshim einbinden

ilkayba · 24. Januar 2019

Hey,

ich versuche derzeit Webshim in meine Web-App einzubinden, da ich deren Kalender benutzen will.

Ich habe alles befolgt was auf deren Seite steht, ('js-webshim' Ordner in mein Projektordner einfügen und per <script> einfügen) jedoch funktioniert es immernoch nicht.

Was ich jedoch nicht verstehe ist, woher die jquery.js kommen soll:

Code

<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script> 
<script>
     webshims.polyfill();
</script>

Den Kalender habe ich auf deren Seite konfiguriert und der Code sieht wie folgt:

Code

<input type="date" class="hide-inputbtns" data-date-start-view="2" data-date-inline-picker="true">

Hat jemand Erfahrung damit und kann mir erklären wie ich alles richtig einbinde?

Kennt vielleicht jemand andere Addons wie diese?

basti1012 · 24. Januar 2019

Jquery kannst du so einbinden

Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ilkayba · 24. Januar 2019

Danke, sieht aber immernoch gleich aus.

So sollte es aussehen, wenn alles korrekt eingebunden ist:

html-seminar.de/woltlab/attachment/1780/

Jedoch es immernoch so aus:

html-seminar.de/woltlab/attachment/1781/

Sempervivum · 24. Januar 2019

Vermutung: Wenn Du webshims.polyfill() aufrufst, muss das input, das dazu gehört, schon definiert sein, d. h. Du musst den Aufruf danach notieren. Lege das Einbinden von jQuery und dem polyfiller in den head-Bereich und das webshims.polyfill() ganz an das Ende des body, vor das schließende </body>.

Sempervivum · 24. Januar 2019

PS: Erst hatte ich mich gefreut, dass es ein Polyfill für das Date-Input gibt, aber als ich nachgelesen habe, kam die Ernüchterung:

Zitat

Webshim is not compatible with upcoming jQuery 3.x and I do not plan to work on a new major version.

D. h. wahrscheinlich musst Du eine 2-er Version von jQuery einbinden.

Möglicher Weise ist es empfehlenswert, eher den Datepicker von jQuery-UI zu verwenden.

ilkayba · 24. Januar 2019

Stimmt, habe ich komplett überlesen.

Ich gucke mir mal die jQuery-UI an, danke!

basti1012 · 24. Januar 2019

ja da kann ich Sempervivum nur zustimmen. Habe das jetzt zwar fast so hnbekommen wie auf deinen Bild ,doch ich finde das etwas kompliziert. Da ist der datepicker um vieles einfacher

ilkayba · 25. Januar 2019

Ich bin jetzt so weit, dass ich einen Inline-Kalender auf meiner Seite habe.

Jedoch will ich das Datum, das ausgewählt wurde auf eine andere Seite per PHP weiterleiten.

Ich habe auf der jQuery-UI Seite eine Methode gefunden die wie folgt aussieht:

Code

var currentDate = $( ".selector" ).datepicker( "getDate" );

Leider habe ich keine Ahnung was ich damit anfangen soll bzw. wie ich das ausgewählte Datum dann per PHP weiterleiten kann..

Mein Code:

HTML

<html>
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $( function() {
                $( "#datepicker" ).datepicker();
            } );
        </script>
    </head>
    <body>
        <form action="datum.php" method="post">
            <div id="datepicker"></div>
            <input type="submit" value="Go">
        </form>
    </body>
    <script>
        var currentDate = $( ".selector" ).datepicker( "getDate" );
    </script>
</html>

Alles anzeigen

Ist meine Vorstellung überhaupt möglich oder geht sowas nicht?

PS:

Code

<div id="datepicker"></div>

ist dafür da, dass der Kalender zu einem Inline-Kalender wird.

Sempervivum · 25. Januar 2019

Ich wollte zunächst empfehlen, Ajax zu benutzen, aber wenn Du das ohnehin an eine andere Seite übergeben willst, sollte es mit dem normalen Abschicken des Formulars über Submit gehen. Du musst nur statt des div ein input für den Datepicker verwenden, damit das Datum dann als POST-Variable zur Verfügung steht.

ilkayba · 25. Januar 2019

Super, klappt alles! Habe ein input-Feld vom typ hidden gemacht, wo dann das Datum, das gerade ausgewählt wurde steht.

Dieses input-Feld gebe ich dann per POST weiter.

Danke für die Hilfe!

Webshim einbinden

Jetzt mitmachen!

Teilen