html5 input - Cómo obtener HTML 5 tipo de entrada="fecha" que funciona en Firefox y / o IE 10




date format (11)

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/

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

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


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

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


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:

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

Ahora, cada vez que necesita el selector de fechas, 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 ...


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?


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


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


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.


Simplemente tuve el mismo problema, y ​​pude solucionarlo simplemente poniendo una coma y no un punto / parada completa en el número debido a la localización en francés .

Así funciona con:

2 esta bien

2,5 esta bien

2.5 es KO (el número se considera "ilegal" y recibe un valor vacío).







html5 forms jquery-ui internet-explorer firefox