Come ottenere il tipo di input HTML 5 = "date" funzionante in Firefox e / o IE 10

Trovo strano che non input type="date"sia ancora supportato in Firefox dopo tutto questo tempo. In realtà, non credo che abbiano aggiunto molti (se ve ne sono) dei nuovi tipi HTML 5 su un elemento di input. Non sorprende che non sia supportato in IE10. Quindi, la mia domanda è ...

Come ottenere type="date"un inputelemento funzionante senza aggiungere, ancora un altro file .js (vale a dire jQueryUIWidget DatePicker) solo per ottenere un calendario / data solo per IE e Firefox Browser? C'è qualcosa là fuori che può essere applicato da qualche parte (CDN forse?) Che farà funzionare questa funzionalità di default in Firefox e / o IE Browser ?? Cercando di scegliere come target IE 8+ Browser e per Firefox, non importa, la versione più recente (28.0) andrà bene.

AGGIORNAMENTO: Firefox 57+ supporta input type = date

Puoi provare webshims , che è disponibile su cdn + carica solo il polyfill, se necessario.

Ecco una demo con CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Nel caso in cui la configurazione predefinita non soddisfi, ci sono molti modi per configurarla . Qui trovi il configuratore di datepicker .

Nota: anche se in futuro potrebbero esserci nuove versioni di bugfix per webshim. Non ci saranno più versioni importanti. Ciò include il supporto per jQuery 3.0 o qualsiasi nuova funzionalità.

È in Firefox dalla versione 51 (26 gennaio 2017), ma non è attivato per impostazione predefinita (ancora)

Per attivarlo:

about: config

dom.forms.datetime -> impostato su true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

C'è un modo semplice per sbarazzarsi di questa limitazione usando il componente datePicker fornito da jQuery.

1. Includi le librerie dell'interfaccia utente jQuery e jQuery (ne sto ancora utilizzando una vecchia)

   • src = "js / jquery-1.7.2.js"
   • src = "js / jquery-ui-1.7.2.js"

2. Usa il seguente taglio

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });

Vedi DatePicker dell'interfaccia utente jQuery - Se necessario, modifica il formato della data .

Type = "date" non è una specifica effettiva a questo punto. È un concetto che Google ha sviluppato ed è nelle loro specifiche whatwg (non ufficiali) ed è supportato solo parzialmente da Chrome.

http://caniuse.com/#search=date

Non farei affidamento su questo tipo di input a questo punto. Sarebbe bello averlo, ma non prevedo che questo ce l'abbia davvero fatta. Il motivo numero 1 è che grava troppo sul browser per determinare la migliore interfaccia utente per un input alquanto complicato. Pensaci da una prospettiva reattiva, in che modo qualcuno dei distributori potrebbe sapere cosa funzionerà meglio con la tua interfaccia utente a 400 pixel, 800 pixel e 1200 pixel di larghezza?

Ecco un esempio completo con la data formattata in AAAA-MM-GG

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

Sebbene ciò non ti consenta di ottenere un'interfaccia utente di datepicker, Mozilla consente l'uso di pattern, quindi puoi almeno ottenere la convalida della data con qualcosa del genere:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Alla fine sono d'accordo con @SuperUberDuper in quanto Mozilla è molto indietro nel includerlo in modo nativo.

Questo è solo un suggerimento che segue la risposta di Dax. (Lo aggiungerei in un commento a quella risposta, ma non ho ancora abbastanza reputazione per commentare altre domande).

Gli ID devono essere univoci per ogni campo, quindi, se nel tuo modulo (o moduli) sono presenti più campi data, puoi utilizzare l'elemento di classe anziché l'ID:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

e il tuo contributo come:

 <input type="text" class="datepicker" name="your-name" />

Ora, ogni volta che hai bisogno del selettore della data, aggiungi semplicemente quella classe. PS Lo so, devi ancora usare js :(, ma almeno sei pronto per tutto il tuo sito. I miei 2 centesimi ...

L'ultima versione di Firefox Firefox 57 (Quantum) supporta la data e altre funzionalità rilasciate il 14 novembre 2017. Puoi scaricarla facendo clic su questo link

Grazie ad Alexander, ho trovato il modo di modificare il formato per la lingua. (Non sapevo quale lang utilizza tale formato)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

A volte non vuoi usare Datepicker http://jqueryui.com/datepicker/ nel tuo progetto perché:

• Non vuoi usare jquery
• Conflitto di versioni jquery nel tuo progetto
• La scelta dell'anno non è conveniente. Ad esempio, hai bisogno di 120 clic sul pulsante precedente per passare a 10 anni fa.

Si prega di consultare il mio codice cross browser molto semplice per l'inserimento della data. Il mio codice si applica solo se il tuo browser non supporta l'inserimento del tipo di data

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Ecco la soluzione corretta. Dovresti usare jpery datepicker ovunque

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Di seguito è riportato il link per ottenere il codice completo

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

Ecco la soluzione perfetta. Dovresti usare JQuery datepicker per inserire la data dell'utente. È molto facile da usare e ha molte funzionalità che la data di input HTML non ha.

Fai clic qui per copiare il codice di datepicker JQuery

Ho dovuto usare il bootstrap-datepickerplugin per far funzionare il calendario su Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Compatibile con Bootstrap v2 e v3. Viene fornito con un foglio di stile autonomo, quindi non devi dipendere da Bootstrap.

Uso:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

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


</body>
</html>