2015-08-17 24 views
5

Używam Modernizr i mam problem z uzyskaniem datownika JQuery do wyświetlania w miejscu natywnego wprowadzania danych html5 w FireFox.Modernizacja: Niepowodzenie wykonywania datetime() przy wprowadzaniu daty w Firefox

To skrzypce pokazuje, co mam na myśli - otworzyć go w FireFox Podczas otwierania Firefox po prostu uzyskać wprowadzania tekstu http://jsfiddle.net/Te2yL/

Kod:

<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> 

Aby potwierdzić, gdy otwarty w FireFox Pobrane zostały jquery-ui js & css.

Ciągle sprawdzam, czy dane wejściowe są wyświetlane w przeglądarce - ich typ jest nadal "datą" podczas inspekcji DOM.

Czy brakuje mi czegoś?

Dziękujemy

+0

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

+0

Sprawdziłem to pytanie (i wiele podobnych). Nie sądzę, że jest to duplikat, ponieważ używam funkcji complete() do wywołania jquery.datetime(), tj. Nie używam tylko modernizatora i oczekuję, że zostanie on naprawiony? Skrzypce także ... –

+0

jest duplikatem, ponieważ użycie pełnej funkcji wymaga, aby test został pomyślnie uruchomiony w pierwszej kolejności. Nie działa, więc to też nie zadziała. – Patrick

Odpowiedz

2

Patrząc na JavaScript w full, uncompressed version of Modernizr że można zawierać od cdnjs.com, nie jest to duży komentarz na szczycie, który mówi:

 * 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/

Tak, trzeba będzie aby pobrać dostosowaną wersję z the Modernizr website, która zawiera Modernizr.load.

z kodu źródłowego z kompilacji modernizr z Modernizr.load zawarte, widzę, że tylko kod, który kleje Yepnope i modernizr razem jest to linia:

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

Więc zamiast hosting dostosowany modernizr zbuduj na swoim własnym serwerze, możesz także włączyć zarówno Modernizr, jak i Yepnope z cdnjs.com, a następnie użyć tej linii kodu, aby skleić je razem. Lub możesz po prostu zapomnieć o Modernizr.load i użyć funkcji yepnope, dla której Modernizr.load to tylko alias.

Innym problemem jest to, że używasz adresów URL HTTP dla skryptów, które powinny pobrać Modernizer.load, co oznacza, że ​​nie będą działać podczas odwiedzania JSFiddle przez HTTPS. Rozważ adresy URL lub, jeszcze lepiej, zawsze używaj adresów URL HTTPS.

See here for a fixed version of your Fiddle

+0

Zrobiłem to - JS Fiddle było łatwiejsze do włączenia niż fragment kodu - W moim własnym kodzie (który jest taki sam jak powyżej (wywołanie modernizr)) Dołączam kompilację Modernizr która obejmuje wszystko, czyli pełną wersję tłuszczu –

+0

Czy otworzyłeś skrzypce w firefoxie? –

+0

@ Lee2808 Datepicker pojawia się po otwarciu [fixed Fiddle] (https://jsfiddle.net/Te2yL/21/) w Firefoksie, tylko CSS nie jest załadowany, ponieważ pełny URL nie jest używany. Jeśli to nie rozwiąże problemu, musi to być specyficzne dla kodu, którego używasz w swojej witrynie internetowej. – user2428118

1

prostu wklejone prosty modernizr zwyczaj budowania w fiddle *, która wydaje się działać dla Firefoksa.

Jednak musiałem zmienić sposób załadować jquery-ui css: wystarczy wymienić ten CDN z żądanego tematu:

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 rację jak yenope nie jest zawarte w standardowym dev build modernizr tu zwyczaj budowy:

enter image description here

* usprawiedliwiać unloving pastę jak nie chcą gościć zwyczaj budowania tej skrzypce :)

uwaga

ja pisał tę samą odpowiedź here przez przypadek, jednak wydaje się być ważne dla tej kwestii, jak również ..