2015-08-17 14 views
5

Sto utilizzando Modernizr e sto riscontrando problemi nel trovare un datapicker dell'interfaccia utente jQuery per visualizzare sul posto l'input di data html5 nativo in FireFox.Modernizr: impossibile eseguire datetime() sull'immissione della data in Firefox

Questo violino mostra quello che voglio dire - aprirlo in FireFox Quando si apre in Firefox ottengo solo un input di testo http://jsfiddle.net/Te2yL/

Codice:

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

Per confermare, quando è aperto in FireFox gli JQuery-ui js & vengono scaricati.

Mi viene ancora visualizzato il testo inserito nel browser: il tipo è ancora 'data' su ispezione del DOM.

Mi manca qualcosa?

Molte grazie

+0

vittima di http://stackoverflow.com/questions/7197016/how-to-use-modernizr-per-input-type-datetime – Patrick

+0

Ho controllato quella domanda (e molte simili). Non penso che sia un duplicato però perché sto usando la funzione complete() per chiamare jquery.datetime(), cioè non sto usando solo modernizr e mi aspetto che sia corretto? Il violino inoltre ... –

+0

è un duplicato perché l'utente che utilizza la funzione completa richiede che il test venga eseguito correttamente con successo. Non lo fa, quindi neanche questo funzionerà. – Patrick

risposta

2

Se si guarda alla JavaScript del full, uncompressed version of Modernizr che è possibile includere da cdnjs.com, c'è questa grande commento in alto che dice:

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

Quindi, si dovrà per scaricare una versione personalizzata da the Modernizr website che include Modernizr.load.

dal codice sorgente di una build di Modernizr con Modernizr.load incluso, posso vedere che l'unico codice che incolla Yepnope e Modernizr insieme è questa linea:

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

Così, invece di ospitare un Modernizr personalizzato costruisci sul tuo server, puoi anche includere sia Modernizr che Yepnope da cdnjs.com e quindi usare questa linea di codice per incollarli insieme. Oppure puoi semplicemente dimenticarti di Modernizr.load e utilizzare la funzione yepnope, per cui lo Modernizr.load è solo un alias.

Un altro problema è che si utilizzano URL HTTP per gli script che devono essere recuperati da Modernizer.load, il che significa che non funzioneranno quando si visita JSFiddle su HTTPS. Considera gli URL protocol-reliative o, meglio ancora, utilizza sempre gli URL HTTPS.

See here for a fixed version of your Fiddle

+0

Ho fatto questo - Il JS Fiddle era più facile da includere di un frammento di codice - Nel mio codice (che è lo stesso di sopra (la chiamata modernizr)) Includo una build Modernizr che include tutto, ad esempio la versione piena di grassi –

+0

Hai aperto il violino in firefox? –

+0

@ Lee2808 Il datepicker compare quando apro il [Fiddle fisso] (https://jsfiddle.net/Te2yL/21/) in Firefox, solo il CSS non viene caricato perché non viene utilizzato l'URL completo. Se questo non risolve il tuo problema, deve essere specifico del codice che stai utilizzando sul tuo sito web. – user2428118

1

ho appena incollato un semplice Modernizr generazione personalizzata nel vostro fiddle * che sembra funzionare per firefox.

Tuttavia, ho dovuto cambiare il modo in cui si carica jquery-ui css: sostituire semplicemente che CDN con il tema desiderato:

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 era giusto come yenope non è incluso nella build dev standard modernizr , ecco la generazione personalizzata:

enter image description here

* scusa la pasta poco amorevole come io non volevo ospitare costruire il personalizzato per che violino :)

nota

ho postato la stessa risposta here per caso, tuttavia sembra essere valida per questa domanda come pure ..