Cómo hacer que el tipo de entrada HTML 5 = "fecha" funcione en Firefox y / o IE 10

Me parece extraño que input type="date"todavía no sea compatible con Firefox después de todo este tiempo. De hecho, no creo que hayan agregado muchos (si los hay) de los nuevos tipos HTML 5 en un elemento de entrada. No me sorprende que no sea compatible con IE10. Entonces, mi pregunta es ...

¿Cómo conseguir que type="date"un inputelemento funcione sin agregar otro archivo .js (es decir, el jQueryUIwidget DatePicker) solo para obtener un calendario / fecha solo para los navegadores IE y Firefox? ¿Hay algo por ahí que se pueda aplicar en algún lugar (CDN, tal vez?) Que hará que esta funcionalidad funcione de forma predeterminada en Firefox y / o en los navegadores IE? Intentar apuntar a los navegadores IE 8+ y para Firefox, no importa, la última versión (28.0) estará bien.

ACTUALIZACIÓN: Firefox 57+ admite el tipo de entrada = fecha

Puede probar webshims , que está disponible en cdn + solo carga el polyfill, si es necesario.

Aquí hay una demostración 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" />

En caso de que la configuración predeterminada no satisfaga, hay muchas formas de configurarla . Aquí encontrarás el configurador datepicker .

Nota: Si bien puede haber nuevas versiones de corrección de errores para webshim en el futuro. Ya no habrá lanzamientos importantes. Esto incluye soporte para jQuery 3.0 o cualquier característica nueva.

Está en Firefox desde la versión 51 (26 de enero de 2017), pero no está activado por defecto (todavía)

Para activarlo:

acerca de: config

dom.forms.datetime -> establecido en verdadero

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

Hay una manera simple de deshacerse de esta restricción utilizando el componente datePicker proporcionado por jQuery.

1. Incluya las bibliotecas jQuery y jQuery UI (todavía estoy usando una antigua)

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

2. Use el siguiente recorte

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

Consulte jQuery UI DatePicker - Cambiar formato de fecha si es necesario.

El tipo = "fecha" no es una especificación real en este momento. Es un concepto que Google ideó y está en sus especificaciones de whatwg (no oficial) y solo es parcialmente compatible con Chrome.

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

No confiaría en este tipo de entrada en este momento. Sería bueno tenerlo, pero no preveo que este realmente lo haga. La razón # 1 es que pone demasiada carga en el navegador para determinar la mejor interfaz de usuario para una entrada algo complicada. Piénselo desde una perspectiva receptiva, ¿cómo sabría alguno de los proveedores qué funcionará mejor con su IU, por ejemplo, a 400 píxeles, 800 píxeles y 1200 píxeles de ancho?

Aquí hay un ejemplo completo con la fecha formateada en AAAA-MM-DD

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

Si bien esto no le permite obtener una interfaz de usuario de datepicker, Mozilla permite el uso de patrones, por lo que al menos puede obtener la validación de fecha con algo como esto:

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

En última instancia, estoy de acuerdo con @SuperUberDuper en que Mozilla está muy atrasado en incluir esto de forma nativa.

Esta es solo una sugerencia que sigue a la respuesta de Dax. (Lo pondría en un comentario en esa respuesta, pero todavía no tengo suficiente reputación para comentar sobre otras preguntas).

Los ID deben ser únicos para cada campo, por lo tanto, si tiene varios campos de fecha en su formulario (o formularios), puede usar el elemento de clase en lugar del ID:

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

y su aporte como:

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

Ahora, cada vez que necesite el selector de fecha, simplemente agregue esa clase. PD: Lo sé, todavía tienes que usar js :(, pero al menos estás configurado para todo tu sitio. Mis 2 centavos ...

La última versión de Firefox, Firefox 57 (Quantum), admite fecha y otras características, se lanzó el 14 de noviembre de 2017. Puede descargarla haciendo clic en este enlace

Gracias a Alexander, encontré una forma de modificar el formato en lang. (No sabía qué idioma usa dicho formato)

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

 $.webshims.activeLang('en');

A veces no desea utilizar Datepicker http://jqueryui.com/datepicker/ en su proyecto porque:

• No quieres usar jquery
• Conflicto de versiones jquery en tu proyecto
• La elección del año no es conveniente. Por ejemplo, necesita 120 clics en el botón anterior para pasar a hace 10 años.

Consulte mi código de navegador cruzado muy simple para la entrada de fecha. Mi código se aplica solo si su navegador no es compatible con la entrada de tipo de fecha

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<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>

Aquí está la solución adecuada. Deberías usar jquery datepicker en todas partes

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

A continuación se muestra el enlace para obtener el código completo

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

Aquí está la solución perfecta. Debe usar JQuery datepicker para la fecha de entrada del usuario. Es muy fácil de usar y tiene muchas características que la fecha de entrada HTML no tiene.

Haga clic aquí para copiar el código JQuery datepicker

Tuve que usar el bootstrap-datepickercomplemento para que el calendario funcionara en Firefox 55 Portable:

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

Compatible con Bootstrap v2 y v3. Viene con una hoja de estilo independiente para que no tenga que depender de 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>