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

191

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

Solomon Closson
fuente
29
Me parece ridículo que Firefox todavía no sea compatible con esto. Hoy me cambié de Chrome a Firefox, solo por un día / semana para ver qué pasa en estos días, ¡y esto inmediatamente me da ganas de volver!
Codemonkey
19
es una broma FF no cena fecha
SuperUberDuper
66
Es por eso que me siento molesto cuando la gente dice que Firefox es el mejor navegador.
Martin Braun
1
Aunque no es una polyfill, sólo terminó usando pickaday que está a js llanura LIB sin jQuery u otras dependencias ...
MB21
2
Parece estar funcionando por defecto en Firefox 57. ¡Aún así!
Antoine Pinsard el

Respuestas:

138

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.

alexander farkas
fuente
esta es una buena solución, la configuración es rica, pero no puedo encontrar dónde configurar el formato de fecha como "AAAA / MM / DD"
Pavel Niedoba
14
Recibo un error de "acceso denegado" cuando intento ejecutar este jsfiddle en IE 11, y el selector de fecha no funciona.
Shavais
44
Esto no funciona en IE10 ... obtengo el mismo error mencionado por @Shavais ... para que funcione, actualice la versión de jquery a 1.11 o superior ... intente este enlace
Nitin
2
Desafortunadamente, el soporte de webshims para el próximo Jquery 3 no se realizará, como se informa en el sitio del autor. Siendo así, confiaría en la buena y vieja interfaz de usuario de Jquery.
marionmaiden
1
Esto definitivamente funciona en firefox. Pero no funcionó en IE
Varuni NR
27

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

Jonathan Vanasse
fuente
Encantado de escuchar esto. Debería estar activado por defecto imo. Pero esto es bueno saberlo.
Solomon Closson
Estoy en FF 64.0.2, pero aunque esta opción es "verdadera" (activada) no funciona, el cuadro de fecha y hora sigue siendo solo texto. Intenté habilitar el "selector de tiempo" sin éxito.
Wasted_Coder
20

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.

Dax
fuente
8
OP dice "trabajando sin agregar, otro archivo .js (es decir, jQueryUI DatePicker Widget)" ... pero esta pregunta es el éxito de Google, por lo que su respuesta sigue siendo MUY útil, aunque no responde la pregunta. Desearía no tener que sentirme mal por votar tu publicación ahora.
phil294
2
También debe incluir jQuery UI CSS para mostrar el calendario correctamente. <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai
16

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?

Chris Love
fuente
138
No estoy de acuerdo, los navegadores deberían ser lo suficientemente inteligentes como para resolver esto. Realmente estoy cansado de usar los recolectores de fechas y tener que seguir actualizándolos.
SuperUberDuper
49
Extraño razonamiento. ¿Demasiada carga para los navegadores, pero no para Joe Web Developer?
jeroenh
35
Esto ahora forma parte del borrador de trabajo de HTML 5: w3.org/html/wg/drafts/html/master/…
Chris
77
Yo también me alegro por cada nuevo tipo de entrada. Están mejor definidos y son nativos, lo que generalmente significa rápido.
Tomáš Zato - Restablece a Monica el
55
@ MM Gracias. Mientras tanto, HTML 5 se ha actualizado a una recomendación oficial del W3C. El nuevo enlace es w3.org/TR/2014/REC-html5-20141028/…
Chris
9

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" />
drooh
fuente
1
¿Alguien sabe si esto permite la opción de agregar un selector de tiempo también?
drooh
Probé su script en JSFiddle @Drooh pero no funciona. Cada vez que selecciono una fecha, aparece como un milisegundo en el campo de entrada y luego desaparece. ¿Alguien puede proporcionar una versión de violín que funcione con una configuración de fecha dd / mm / aaaa?
Ryan Coolwebs
Tenga en cuenta que, a partir de agosto de 2016, webshim no funciona con jQuery 3 y, en mis pruebas, tampoco funciona con 2.2.4.
drooh
He encontrado que esta es la mejor solución hasta que Firefox agrega una entrada de fecha stackoverflow.com/questions/2528706/…
drooh
4

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.

ajax1515
fuente
1
¿hay una versión para "tiempo"?
Malcolm Salvador
1
Por favor, amplíe este ejemplo. ¿Es este un atributo html para la entrada?
Wasted_Coder
3

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

codeispoetry
fuente
3

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

irfandar
fuente
0

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');
Pavel Niedoba
fuente
Creo que el único país 'en' que usa ese formato es Canadá. En cualquier caso, 'en' es ambiguo, porque también incluye a los Estados Unidos, que tiene un formato de fecha 'especial' prácticamente propio.
Michael Scheper el
En mi caso, se trata de anular el formato de fecha para cualquier configuración regional del cliente, que puede diferir en las estaciones de trabajo del cliente. Sin embargo, en una página en particular, quiero usar este formato de fecha (por razones de copiar y pegar). Es más como un comentario para la respuesta de Alexander Farkas, pero pongo una respuesta separada porque no puedo pegar el código en el comentario. Estoy usando esto en el entorno de producción durante más de un año.
Pavel Niedoba
Ten cuidado. Si Webshims se basa en la interpretación del navegador de la configuración regional, es posible que tenga resultados impredecibles. 'en' probablemente no significará el mismo formato en diferentes plataformas (dependiendo de la configuración regional del sistema) o incluso en diferentes navegadores. Puede ser interpretado como 'en-ca' por un navegador en Canadá (que probablemente sea aaaa-mm-dd, pero posiblemente no sea consistente) pero 'en-in' por un navegador en India (que, como la mayoría del mundo , produciría dd-mm-aaaa). El hecho de que esté en el código de producción no significa que se haya probado correctamente; existen muchos errores de i18n en el código de producción, incluso en sitios grandes.
Michael Scheper el
La última línea $ .webshims.activeLang ('en'); debería forzar lang (o configuración regional) a webshims anulando la configuración del navegador, por lo que el formato es siempre el mismo.
Pavel Niedoba
0

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>

Andrej
fuente
3
Este código falla por completo. No puedo escribir una fecha porque el campo ya está lleno con "AAA-MM-DD", y si trato de borrarlo, vuelve a aparecer.
Stephen R
Por favor no elimine guiones. He probado con éxito en Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11. Por favor, dígame su dispositivo, sistema operativo y navegador.
Andrej
De hecho, estoy presionando el enlace "Ejecutar fragmento de código" justo debajo de tu comentario. No puedo escribir una fecha correctamente porque el marcador de posición "AAAA-MM-DD" compite activamente conmigo en lugar de desaparecer cuando empiezo a escribir. Estoy usando la última versión de Firefox en Windows 10.
Stephen R
1
no responde a la pregunta ya que viola la condición de no agregar archivos JS externos, y en realidad el código en sí mismo es completamente intuitivo de usar. fuerza el formato ISO en las personas, incluso cuando no es su formato de fecha nativo, no puede escribir una fecha nueva a medida que vuelve a aparecer la máscara de entrada, no puede sobre escribir la máscara de entrada, ya que no es una máscara sino texto real en el cuadro, tiene que eliminar la máscara como usted escribe de ninguna manera mejor que una entrada estándar con validación regex
MikeT
-1

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'
});
Santiago abandona SO
fuente
-2
<!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>
WAYSER
fuente