Cómo obtener HTML 5 tipo de entrada = “fecha” que funciona en Firefox y / o IE 10

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

¿Cómo obtener type="date" en un elemento de input que funciona sin agregar, sin embargo, otro archivo .js (es decir, jQueryUI DatePicker Widget) solo para obtener un calendario / fecha solo para IE y Firefox Browsers? ¿Hay algo que se pueda aplicar en algún lugar (¿quizás CDN?) Que hará que esta funcionalidad funcione de manera predeterminada en Firefox y / o en los navegadores de IE. Intentar apuntar a los navegadores IE 8+ y Firefox, no importa, la versión más reciente (28.0) estará bien.

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

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

       

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

Nota: Si bien puede haber nuevas versiones de corrección de errores para webshim en el futuro. Ya no habrá mayores lanzamientos. 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:

sobre: ​​config

dom.forms.datetime -> set to true

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

Hay una manera simple de deshacerse de esta restricción mediante el uso del 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'}); }); 

Ver jQuery UI DatePicker – Cambiar formato de fecha si es necesario.

El tipo = “fecha” no es una especificación real en este punto. Es un concepto que se le ocurrió a Google y está en sus especificaciones whatwg (no oficiales) y solo es parcialmente compatible con Chrome.

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

No confiaría en este tipo de entrada en este punto. Sería bueno tenerlo, pero no preveo que este lo logre. El motivo n. ° 1 es que impone demasiada carga al 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 UI, digamos 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

     

Si bien esto no le permite obtener un identificador de fecha ui, 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))' 

Finalmente, estoy de acuerdo con @SuperUberDuper en que Mozilla está muy atrás al incluir esto de forma nativa.

Esta es solo una sugerencia que sigue la respuesta de Dax. (Lo pondré en un comentario en esa respuesta, pero aún no tengo suficiente reputación para comentar las preguntas de los demás).

Id debe ser único 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:

   

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

La versión más reciente de firefox, firefox 57 (Quantum), admite la fecha y otras características, se publicó el 14 de noviembre de 2017. Puede descargarla haciendo clic en este enlace

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

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

A veces no quieres utilizar Datepicker http://jqueryui.com/datepicker/ en tu proyecto porque:

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

Por favor, consulte mi código de navegador cruzado muy simple para la entrada de fecha. Mi código se aplica solo si su navegador no admite la entrada de tipo de fecha

    Input Key Filter Test          

Date field

Date: New date:

Aquí está la solución perfecta. Debe usar JQuery datepicker para ingresar la fecha 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

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

   

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

     jQuery UI Datepicker - Default functionality        

Date: