2015-08-17 4 views
5

nicht ausführen Ich habe die Verwendung von Modernizr und habe Schwierigkeiten, eine jquery UI Datepicker anstelle der nativen HTML5 Datum Eingabe in FireFox anzuzeigen.Modernizr: Datetime() auf Datum Eingabe in Firefox

Diese Geige zeigt, was ich meine - öffnen Sie es in FireFox Wenn in Firefox öffnet I eine Texteingabe http://jsfiddle.net/Te2yL/

-Code nur erhalten:

<head> 
    //Include Modernizr - all items are included (full-fat version) 
    <script src="assets/js/vendor/modernizr.js"></script> 
</head> 

<body> 
    <input 
     type="date" 
     id="start-date" 
     ng-model="someVariable" 
     format-date 
     class="form-control date" 
    /> 

    <script> 

    Modernizr.load({ 
     test: Modernizr.inputtypes.date, 
     nope: ['https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js', 
     'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/smoothness/jquery-ui.css' 
     ], 
     complete: function() { 
      $('input[type=date]').datepicker({ 
       dateFormat: 'yy-mm-dd' 
      });     
     } 
    }); 

</script> 

</body> 
</html> 

, wenn sie offen in FireFox Um zu bestätigen, die Jquery-ui js & css werden heruntergeladen.

Ich bekomme immer noch die Texteingabe im Browser angezeigt - es ist immer noch Typ "Datum" auf Inspektion des DOM.

Fehle ich etwas?

Vielen Dank

+0

Betrogene von http://stackoverflow.com/questions/7197016/how-to-use-modernizr-for-input-type-datetime – Patrick

+0

Ich habe diese Frage (und viele ähnliche) ausgecheckt. Ich glaube aber nicht, dass es ein Duplikat ist, weil ich die Funktion complete() verwende, um jquery.datetime() aufzurufen, d. H. Ich benutze nicht nur moderniszr und erwarte, dass es repariert wird? Die Geige auch ... –

+0

es ist ein Duplikat, weil die Sie mit der vollständigen Funktion erfordert, dass der Test in erster Linie erfolgreich ausgeführt werden. Tut es nicht, also wird das auch nicht funktionieren. – Patrick

Antwort

2

Wenn im JavaScript des full, uncompressed version of Modernizr suchen, die Sie von cdnjs.com umfassen können, gibt an der Spitze dieser großen Kommentar ist, der sagt:

 * Modernizr has an optional (not included) conditional resource loader 
* called Modernizr.load(), based on Yepnope.js (yepnopejs.com). 
* To get a build that includes Modernizr.load(), as well as choosing 
* which tests to include, go to www.modernizr.com/download/

So, müssen Sie um eine angepasste Version von the Modernizr website herunterzuladen, die Modernizr.load enthält.

Aus dem Quellcode eines Build von Modernizr mit Modernizr.load enthalten ist, kann ich sehen, dass der einzige Code, der Yepnope und Modernizr zusammen ist diese Linie klebt:

Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0));}; 

Anstatt also eine maßgeschneiderte Modernizr Hosting Erstellen Sie auf Ihrem eigenen Server, können Sie auch Modernizr und Yepnope von cdnjs.com einschließen und dann diese Codezeile verwenden, um sie zusammen zu kleben. Oder Sie können einfach Modernizr.load vergessen und die yepnope Funktion verwenden, für die Modernizr.load nur ein Alias ​​ist.

Ein weiteres Problem ist, dass Sie HTTP-URLs für die Skripts verwenden, die Modernizer.load abrufen sollten, was bedeutet, dass sie nicht funktionieren, wenn Sie JSFiddle über HTTPS besuchen. Betrachten Sie protocol-reliative URLs oder, noch besser, immer HTTPS-URLs.

See here for a fixed version of your Fiddle

+0

Ich habe dies getan - Die JS Fiddle war einfach einfacher als ein Code-Snippet - In meinem eigenen Code (der derselbe wie oben ist (der Aufruf modernisizr)) Ich schließe einen Modernisr Build ein was beinhaltet alles, zB die Vollfettversion –

+0

Hast du die Fiddle in Firefox geöffnet? –

+0

@ Lee2808 Der Datepicker erscheint, wenn ich die [fixed Fiddle] (https://jsfiddle.net/Te2yL/21/) in Firefox öffne, nur das CSS wird nicht geladen, da die vollständige URL nicht verwendet wird. Wenn dies Ihr Problem nicht löst, muss es spezifisch für den Code sein, den Sie auf Ihrer Website verwenden. – user2428118

1

klebte ich nur eine einfache modernizr Brauch in Ihrem fiddle * bauen, das für Firefox zu funktionieren scheint.

Allerdings hatte ich die Art und Weise ändern Sie jquery-ui CSS laden: einfach, dass CDN mit Ihrem gewünschten Thema ersetzen:

nope: [ 
     'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 
     'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 
     'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css'], 
    .... 

user2428118 hatte Recht als yenope nicht im Standard-Entwickler-Build von modernizr enthalten ist , hier die Maßarbeit:

enter image description here

* die lieblos Paste entschuldigen, da ich nicht die Gewohnheit bauen für die Geige bewirten wollte :)

note

ich die gleiche Antwort here zufällig gepostet habe, scheint aber es auch für diese Frage gültig zu sein ..