jQuery Datepicker funktioniert nicht auf Mobile

Ich erstelle ein Formular mit einem Datepicker-Element. Ich hatte die Eingabe am Datum, aber der Designer möchte, dass der Kalender geöffnet wird, wenn auf das Eingabefeld geklickt wird, nicht von einem Dropdown-Pfeil. Also benutze ich einen jQuery-Datepicker, der genau so funktioniert, wie ich es auf dem Desktop haben möchte. Aber wenn ich auf eine mobile Ansicht umschalte, wird nichts geladen. Ich bin sehr neu in jQuery. HierjQuery Datepicker funktioniert nicht auf Mobile

ist der Haupt-Skript:

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type = "text/javascript" 
    src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

Das Skript:

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

Und eine Basisversion meiner html:

<p>Date: <input type = "text" id = "datepicker"></p>

Jede Hilfe, warum wird es nicht geladen werden Die Seite auf dem Handy ist sehr geschätzt!

Quelle

2017-08-10 Rachel B.

Haben Sie versucht, jQuery Mobile zu benutzen? – Dekel

Gibt es noch etwas, das Sie uns bei der Fehlerbehebung zur Verfügung stellen können? Mit dem kleinen Teil, den ich geteilt habe, habe ich ein jsFiddle zusammengestellt, um das Problem neu zu erstellen, aber es funktioniert wie erwartet, sogar auf meinem mobilen Gerät. Wenn Sie "zu einer mobilen Ansicht wechseln" sagen, ändern Sie die Größe des Browsers, emulieren Sie ein mobiles Gerät, etwas Ähnliches? –

@Dekel Das hat funktioniert, aber jetzt ist das Styling auf meiner Desktop-Site völlig falsch. Ich habe versucht "Daten-Rolle: keine;" aber es scheint nicht zu funktionieren. –

Wann wird Ihre Funktion $("#datepicker").datepicker(); ausgeführt?

Instanciate Ihre Datumsauswahl, wenn die Bibliotheken geladen wurden und das DOM geladen ist:

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

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <input name="date" type="text" placeholder="Choose date" id="datepicker"> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-08-12 08:02:57 deblocker

jQuery Datepicker funktioniert nicht auf Mobile

Antwort

Verwandte Themen